首页 > 代码库 > 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); }}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。