使用JavaScript实现回到顶部效果
2017-04-27 09:54
459 查看
锚链接
使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:
功能点
1. 返回顶部的过程是一个由快到慢的滚动过程;
2. 在返回顶部的滚动过程中,如果滚动鼠标滚轮,可暂停在当前位置。
3. 滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;
主要知识点
1. DOM操作
document.getElementById
-根据ID获取标签元素
获取浏览器距离顶部的高度,注意在chrom和IE等浏览器的兼容性
-document.documentElement.scrollTop 滚动条到顶端的距离,可以读写(适用 IE 类浏览器)
-document.body.scrollTop 滚动条到顶端的距离,可以读写(适用 chrome 类浏览器)
事件运用
window.onload 页面加载完毕后触发
onclick 点击后触发
window.onscroll 滚动条滚动时触发
定时器
setInterval() 设置定时器,需传入两个参数:第一个是重复执行的函数,第二个是函数重复执行的时间间隔
clearInterval() 关闭定时器,需传入一个参数:定时器对象
代码
首先获取元素标签,并对其绑定点击事件:获取滚动条距离顶部的高度并进行赋值操作。这样可实现每点击一次滚动条向上滚动200的距离,需要不断触发点击事件直到滚动条回到顶部为止。
使用setInterval()函数,每隔一段时间执行一次赋值操作。并当滚动条距离顶部的高度值osTop为0时,清除定时器。
为了实现滚动条向上滚动的过程是一个由快到慢的过程,执行下面的运算。
在这里使用Math.floor()向下取整,当
然鹅,用Math.ceil()向上取整,可保证
这样就实现了点击返回顶部按钮,页面返回顶部的速度随着滚动条到顶部距离的减小而变慢,即实现了一个速度由快到慢的过程。
window是一个窗口类,onscroll是窗口类window的对象,滚动滚动条时触发。
这里
实现了滚动暂停,另外再在
1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存,另外会造成变量名污染;
2、var osTop = document.documentElement.scrollTop。如果写在外面,osTop只是在JS文件载入时获取滚动条距离顶部的高度,但有的时候,如页面在滚动的时候osTop的值是在不断变化的,所以我们要在绑定scroll事件中不断的去获取osTop的值.
使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:
<a href="#" ></a>,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.
功能点
1. 返回顶部的过程是一个由快到慢的滚动过程;
2. 在返回顶部的滚动过程中,如果滚动鼠标滚轮,可暂停在当前位置。
3. 滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;
主要知识点
1. DOM操作
document.getElementById
-根据ID获取标签元素
var obtn=document.getElementById('btn');
获取浏览器距离顶部的高度,注意在chrom和IE等浏览器的兼容性
-document.documentElement.scrollTop 滚动条到顶端的距离,可以读写(适用 IE 类浏览器)
-document.body.scrollTop 滚动条到顶端的距离,可以读写(适用 chrome 类浏览器)
事件运用
window.onload 页面加载完毕后触发
onclick 点击后触发
window.onscroll 滚动条滚动时触发
定时器
setInterval() 设置定时器,需传入两个参数:第一个是重复执行的函数,第二个是函数重复执行的时间间隔
clearInterval() 关闭定时器,需传入一个参数:定时器对象
代码
首先获取元素标签,并对其绑定点击事件:获取滚动条距离顶部的高度并进行赋值操作。这样可实现每点击一次滚动条向上滚动200的距离,需要不断触发点击事件直到滚动条回到顶部为止。
var osTop=document.documentElement.scrollTop|| document.body.scrollTop; //osTop=200; document.documentElement.scrollTop=document.body.scrollTop-=200;
使用setInterval()函数,每隔一段时间执行一次赋值操作。并当滚动条距离顶部的高度值osTop为0时,清除定时器。
为了实现滚动条向上滚动的过程是一个由快到慢的过程,执行下面的运算。
ispeed的绝对值越大、滚动条距离顶部的高度值就越小,即回到顶部的速度就越快;
ispeed的绝对值越小,返回顶部的速度就相对较小。
在这里使用Math.floor()向下取整,当
osTop / 5介于0~1之间时,
ispeed的值舍为0。这样的话chrome浏览器中滚动条距离顶部的高度值
document.body.scrollTop= osTop-0,这样滚动条的距离顶部的高度会一直为某个数字。导致滚动条到顶部的距离永远不会为0,这样滚动条看似在顶部位置停止,实际上鼠标下拉滚动条时发现滚动条依然会向上滚动,说明定时器一直在执行。
var ispeed=Math.floor(osTop / 5); document.documentElement.scrollTop=document.body.scrollTop = osTop-ispeed; // console.log(osTop-ispeed);
然鹅,用Math.ceil()向上取整,可保证
ispeed的值不会为0;或者依然使用Math.floor()将值改为负值
Math.floor(-osTop / 5)是一样的道理。代码如下:
var timer = null; obtn.onclick=function(){ //设置定时器 timer=setInterval(function(){ //获取滚动条距离顶部的高度 var osTop=document.documentElement.scrollTop|| document.body.scrollTop; var ispeed=Math.floor(-osTop / 5); isTop = true; document.documentElement.scrollTop=document.body.scrollTop = osTop+ispeed; if(osTop==0){ clearInterval(timer); } },30); }
这样就实现了点击返回顶部按钮,页面返回顶部的速度随着滚动条到顶部距离的减小而变慢,即实现了一个速度由快到慢的过程。
window是一个窗口类,onscroll是窗口类window的对象,滚动滚动条时触发。
这里
window.onscroll事件的目的,就是在使用鼠标的滚动按钮滚动页面时停止setInterval.用的方法是添加一个
isTop.由于页面是一点一点滚动的,函数会被执行多次。鼠标滚动,触发
window.onscroll,执行完里面的函数后才执行setInterval,但是在执行
window.onscroll事件第二次的时候
!isTop=true,清楚定时器,这个时候就不再往上滚动了。
var isTop = true; var clientHeight = document.documentElement.clientHeight;//获取页面可视区高度 window.onscroll=function(){ //alert(clientHeight); //滚动条滚动触发 if(!isTop)//条件为真时执行清除定时器操作 clearInterval(timer); isTop = false; }
实现了滚动暂停,另外再在
window.onscroll事件中使用脚本控制“回到顶部”按钮的显示与隐藏
var osTop=document.documentElement.scrollTop|| document.body.scrollTop; if(osTop >= clientHeight){ obtn.style.display = 'block'; }else{ obtn.style.display = 'none'; }
问题:
var osTop = document.documentElement.scrollTop为什么不能做全局变量1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存,另外会造成变量名污染;
2、var osTop = document.documentElement.scrollTop。如果写在外面,osTop只是在JS文件载入时获取滚动条距离顶部的高度,但有的时候,如页面在滚动的时候osTop的值是在不断变化的,所以我们要在绑定scroll事件中不断的去获取osTop的值.
相关文章推荐
- 使用JavaScript实现回到顶部效果
- javascript 回到顶部的效果实现
- JavaScript和jQuery实现回到顶部效果
- Javascript 实现回到顶部效果
- 使用JS实现一个匀速回到顶部的效果
- JavaScript回到顶部的效果实现
- 用javascript实现回到顶部效果
- 使用JavaScript实现回到顶部功能
- javascript 回到顶部效果的实现代码
- 用Javascript实现回到顶部效果
- javascript 特效实现(2)——回到顶部效果
- javascript 回到顶部效果的实现代码
- JavaScript回到顶部的滑动效果实现
- jQuery实现带有动画效果的回到顶部和底部代码
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- 【js】使用javascript 实现静态网页分页效果
- 一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡
- 使用纯javascript实现放大镜效果
- 使用Javascript实现返回顶部功能。