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

JavaScript实现的回到顶部效果

参考自: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);    }}