首页 > 代码库 > JavaScript实现的回到顶部效果

JavaScript实现的回到顶部效果

2024-07-12 04:02:42   223人阅读

参考自：http://www.imooc.com/learn/65

 

几乎所有的网站都会有回到顶部的功能，可以直接用锚点（#）实现，但是跳转的很生硬。

1、使用插件，我之前在介绍两个JQuery插件 — 滚动和轮播说过一个滚动插件，使用效果不错。

我在自己的小项目使用了：旅行笔记

2、原生的JS实现。

有两个点，一个是window 的滚动事件：window.onscroll，另一个是setInterval和clearInterval。

具体内容见代码，里面注释了。

window.onload = function() {    var btn = document.getElementById(‘btn‘);    var timer = null;    var isTop = true;    var clientHeight = document.documentElement.clientHeight;    window.onscroll = function() {        var osTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度，不同浏览器获取方式不同        //控制回到顶部按钮的显示，如果滚动条的高度大于屏幕的高度就显示        if(osTop >= clientHeight) {            btn.style.display = ‘block‘;        } else {            btn.style.display = ‘none‘;        }        //在滚动过程中，用户若滑动鼠标滚轮即可停止滑动        if(!isTop) {            clearInterval(timer);        }        isTop = false;    }    btn.onclick = function() {        //每隔30ms执行一个，每次的速度逐渐减小，成为一种缓动效果，越靠近顶部越慢。        timer = setInterval(function() {            var osTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度            var iSpeed = Math.floor(-osTop / 6);            document.documentElement.scrollTop = document.body.scrollTop = osTop + iSpeed;            isTop = true;            if(osTop == 0) {                clearInterval(timer);            }        }, 30);    }}

 

 


联系
我们