下面小编就为大家带来一篇 JS 实现回到页面顶部动画效果的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下 js,记录下来。
发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了 imooc 上相关课程,最终实现 JS 代码如下:
- //页面加载后触发
- 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() {
- //设置定时器
- timer = setInterval(function() {
- //获取滚动条距离顶部高度
- var osTop = document.documentElement.scrollTop || document.body.scrollTop;
- var ispeed = Math.floor( - osTop / 7);
- document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
- //到达顶部,清除定时器
- if (osTop == 0) {
- clearInterval(timer);
- };
- isTop = true;
- },
- 30);
- };
- };
以上这篇 JS 实现回到页面顶部动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0225/265504.html