回到顶部

来源：互联网发布：厦门大学吴春明知乎编辑：程序博客网时间：2024/04/28 04:36

#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none;

background:url(images/top_bg.png) no-repeat left top;} //固定定位，默认隐藏

#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;} //鼠标悬浮样式变化
</style>
<body>
<a href="javascript:void(0);" id="btn" title="回到顶部"></a>
</body>
<script>

$(document).ready(onLoad);

function onLoad(){
var timer = null; // 定时器

var enableBack= false; //是否允许自动滚动

        $("#btn").click(function(){
            timer = setInterval(function(){   //点击按钮时，设置定时器
                var scrollHeight = $(window).scrollTop();   //获取滚动高度
                var speed = Math.floor(-scrollHeight / 6);   //自动滚动速度由快变慢
                $(window).scrollTop(scrollHeight + speed); //自动滚动，这时还未触发滚动回调函数，定时器执行完才回调
                enableBack= true;    //自动滚动时，设置允许自动滚动
                if(scrollHeight <= 0){   //自动滚到顶部时，清除定时器
                   clearInterval(timer);
                }
            },30);
        });

     $(window).on('scroll',function(){
           if($(window).scrollTop() > $(window).height()){
               $("#btn").show(); //滚出第一屏时，显示按钮
           }
           else{
               $("#btn").hide();    //回到第一屏时，显示按钮
           }

if(!enableBack){

//上一次为自动或者这次为自动，那么enableBack为true；

//上一次为手动，这次也为手动，则enableBack为false;

//手动滚动时，往往要触发多次，因此第二次以后enableBack为false

                clearInterval(timer);
           }
           enableBack = false;
     });
}

</script>

top_bg.png

0 0