jquery回到页面顶部代码案例

发布时间：2020-07-03 18:18:51 来源：网络阅读：805 作者：为梦加速栏目：web开发

方法一：

效果图

jquery回到页面顶部代码案例

css代码：

.backToTop { 
    display: none; 
    width: 18px; 
    line-height: 1.2; 
    padding: 5px 0; 
    background-color: #000; 
    color: #fff; 
    font-size: 12px; 
    text-align: center; 
    position: fixed; 
    _position: absolute; 
    right: 10px; 
    bottom: 100px; 
    _bottom: "auto"; 
    cursor: pointer; 
    opacity: .6; 
    filter: Alpha(opacity=60); 
}

js代码：

(function() { 
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
            $("html, body").animate({ scrollTop: 0 }, 120); 
    }), $backToTopFun = function() { 
        var st = $(document).scrollTop(), winh = $(window).height(); 
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();     
        //IE6下的定位 
        if (!window.XMLHttpRequest) { 
            $backToTopEle.css("top", st + winh - 166);     
        } 
    }; 
    $(window).bind("scroll", $backToTopFun); 
    $(function() { $backToTopFun(); }); 
})();

方法二：

效果图

jquery回到页面顶部代码案例

代码：

需要引人jquery和一张向上箭头图片up.png

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Insert title here</title> 
<script type="text/javascript" src="../javascript/jquery-1.6.js"></script> 
<style type="text/css"> 
    body { 
        height:1200px; 
    } 
     
    #testIE6 { 
        _height:1200px; 
        _width:200px; 
    } 
     
    .scroll-up { 
        background: #dcdcdc url('up.png') no-repeat center center; 
        width:48px !important; 
        height:48px !important; 
        _width: 58px; 
        _height: 58px; 
        position: fixed; 
        _position: absolute; /*for IE6*/ 
        opacity: .6; 
        filter: Alpha(opacity=60); /*for IE*/ 
        padding:5px;  
        cursor: pointer; 
        display: none; 
 
        border-radius:5px; 
        -webkit-transition-property: background-color, opacity; 
        -webkit-transition-duration: 1s; 
        -webkit-transition-timing-function: ease; 
         
        -moz-transition-property: background-color; 
        -moz-transition-duration: 1s; 
        -moz-transition-timing-function: ease; 
    } 
    .scroll-up:hover { 
        background-color:#B9B9B9; 
        opacity: .8; 
    } 
</style> 
</head> 
<body> 
    <div id="testIE6"></div> 
    <script type="text/javascript"> 
        ;(function($) { 
            $.scrollBtn = function(options) { 
                var opts = $.extend({}, $.scrollBtn.defaults, options); 
 
                var $scrollBtn = $('<div></div>').css({ 
                                    bottom: opts.bottom + 'px', 
                                    right: opts.right + 'px' 
                                }).addClass('scroll-up') 
                                .attr('title', opts.title) 
                                .click(function() { 
                                    $('html, body').animate({scrollTop: 0}, opts.duration); 
                                }).appendTo('body'); 
                                                                                     
                $(window).bind('scroll', function() { 
                    var scrollTop = $(document).scrollTop(), 
                        viewHeight = $(window).height(); 
 
                    if(scrollTop <= opts.showScale) { 
                        if($scrollBtn.is(':visible')) 
                            $scrollBtn.fadeOut(500); 
                    } else { 
                        if($scrollBtn.is(':hidden'))  
                            $scrollBtn.fadeIn(500); 
                    } 
 
                    if(isIE6()) { 
                        var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; 
                        $scrollBtn.css('top', top + 'px'); 
                    } 
                }); 
 
                function isIE6() { 
                    if($.browser.msie) { 
                        if($.browser.version == '6.0') return true; 
                    } 
                } 
            }; 
 
            /** 
             * -params  
             *  -showScale: scroll down how much to show the scrollup button 
             *  -right: to right of scrollable container  
             *  -bottom: to bottom of scrollable container  
             */ 
            $.scrollBtn.defaults = { 
                showScale: 100,   
                right:10, 
                bottom:10, 
                duration:200, 
                title:'back to top' 
            } 
        })(jQuery); 
 
        $.scrollBtn({ 
            showScale: 200, 
            bottom:20, 
            right:20 
        }); 
    </script> 
</body> 
</html>

附件：http://down.51cto.com/data/2362200

向AI问一下细节

jquery回到页面顶部代码案例

猜你喜欢

最新资讯

相关推荐

相关标签