返回顶部效果

来源：互联网发布：唐代以胖为美知乎编辑：程序博客网时间：2024/05/18 01:01

主要知识点：

1、var osTop = document.documentElement.scrollTop || document.body.scrollTop;滚动条的数值，即获取滚动条距离页面顶部的高度（兼容各浏览器）

2、var clientHeight = document.documentElement.clientHeight;获取页面可视区域的高度

3、window.onscroll 滚动条滚动时触发

4、setInterval() 设置定时器,需传两个参数，第一个是执行的函数，第二个是间隔时间

clearInterval()清除定时器，需传一个参数，即定时器赋值的变量

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">img {margin-top: 100px;}#backTop {position: fixed;right: 10px;bottom: 10px;cursor: pointer;width: 50px;height: 50px;line-height: 50px;text-align: center;transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;display: none;}#backTop span {color: #042376;font-size: 2em;}#backTop:hover {background: #042376;}#backTop:hover span {color: #fff;}</style><link rel="stylesheet" type="text/css" href="font_l6yr9chdy2yphkt9/iconfont.css" /></head><body><img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" /><br /><img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" /><img src="img/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" /><div id="backTop"><span class="iconfont"></span></div><script type="text/javascript">window.onload = function() {backTop();}function backTop() {//这里obtn，clientHeight，isTop没用var，所以是全局变量，为了在onScroll函数中也可以使用obtn = document.getElementById("backTop");//获取页面可视区域的高度clientHeight = document.documentElement.clientHeight;var timer = null;isTop = true; //isTop为false时清除定时器//滚动滚轮时触发//window.onscroll = function() {////}addScrollEvent(onScroll); //为了不影响其他scroll事件obtn.onclick = function() {//设置定时器timer = setInterval(function() {isTop = true; //写在前面，ie78下就可以运行//获取滚动条距离顶部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop;var ispeed = Math.ceil(osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed;if(osTop == 0) {clearInterval(timer);}}, 30)}}function onScroll() {var osTop = document.documentElement.scrollTop || document.body.scrollTop;//当滚动条数值超过可视区域高度，按钮显示，否则隐藏if(osTop >= clientHeight) {obtn.style.display = 'block';} else {obtn.style.display = 'none';}if(!isTop) {clearInterval(timer);}isTop = false;}function addScrollEvent(func) {var oldonload = window.onscroll;if(typeof window.onscroll != "function") {window.onscroll = func;} else {window.onscroll = function() {oldonload();func();}}}</script><script type="text/javascript" src="js/new_file.js"></script></body></html>

做了很大改进：

1、把backTop函数封装，不把函数内容放在onload里

2、封装了addScrollEvent函数，用addScrollEvent函数追加一个onscroll事件，能够做到不影响页面原来的其他onscroll效果

3、因为onScroll()函数已封装，故里面用到的变量，都需在声明处写为全局变量，这样作用域才能覆盖onScroll函数

0 0