jQuery返回顶部（精简版）

jQuery返回顶部（精简版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery返回顶部</title>
    <style>
    *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的，防抖动 */}
    *body #toTop{ position: absolute; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */}
    #toTop{ display: none; position: fixed; border: 1px solid red; right: 10px; bottom: 10px; padding: 10px 0; cursor: pointer;}
    </style>
</head>
<body style="height:3000px;">
    <div id="toTop"> scroll to top</div>
    
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script>
    $(function(){
        var toTop = $('#toTop');

        // 当窗口滚动条滚动时触发
        $(window).scroll(function(){
            var st = $(window).scrollTop();        //获取浏览器窗口向上滚动的距离
            
            // 选项卡标签栏/控制台调试代码
            // document.title = $(window).scrollTop();
            // console.log($(window).scrollTop());

            // 判断向上滚动距离是否大于500
            if(st<500){
                toTop.fadeOut('fast');
            }else{
                toTop.fadeIn('fast');
            }
        });
        // 当点击按钮时触发
        toTop.click(function(){
            $('html ,body').animate({
                scrollTop: 0
            },300); 
            return false;  
        });
    });
    </script>
</body>
</html>

 

posted @ 2015-11-11 11:08  波克比520  阅读(276)  评论(0)  编辑  收藏  举报