jQuery返回顶部（精简版）-优快云博客

本文介绍了一个使用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>

转载于:https://www.cnblogs.com/bokebi520/p/4955502.html