实现回到顶部效果除了用 js 可以实现之外还可以用锚链接实现,把 a 标签的 href 的属性设置为”#”时,点击该标签就会回到顶部,但是这种方式从用户体验的角度上来讲并不是很好。这里主要介绍如何利用 js 来实现这个功能,并提供较好的用户体验。
需求
- 滚动条距离顶部较远时显示返回顶部按钮,较近时不显示。
- 鼠标未放到返回顶部按钮上时,返回按钮显示向上的箭头,鼠标放在上面时显示“返回顶部”字样。
- 返回顶部的速度随着滚动条到顶部的距离减小而减小。
- 再返回顶部的过程中,如果滚动鼠标滚轮可以暂停到当前位置。
主要知识点
DOM 操作
document.getElementById
document.documentElement.scrollTop 滚动条到顶端的距离,可以读写(适用 IE 类浏览器)
document.body.scrollTop 滚动条到顶端的距离,可以读写(适用 chrome 类浏览器)事件运用
windown.onload 页面加载完毕后触发
onclick 点击后触发
windown.onscroll 滚动条滚动时触发定时器
setInterval() 设置定时器,需传入两个参数:第一个是重复执行的函数,第二个是函数重复执行的时间间隔
clearInterval() 关闭定时器,需传入一个参数:定时器对象
源码
html页面
1 |
|
CSS 文件
1 | #btn { |
按钮背景图片 40*80
javascript 文件
1 | //页面加载完毕后触发 |