JS实现回到页面顶部动画效果的简单实例


Posted in Javascript onMay 24, 2016

最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下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实现回到页面顶部动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 #Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 #Javascript
原生js的数组除重复简单实例
May 24 #Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 #Javascript
json传值以及ajax接收详解
May 24 #Javascript
JS获取屏幕高度的简单实现代码
May 24 #Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 #Javascript
You might like
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
twig里使用js变量的方法
2016/02/05 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
详解python中的json的基本使用方法
2016/12/21 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
物流司机岗位职责
2013/12/28 职场文书
社会实践感言
2014/01/25 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
人事文员岗位职责
2014/02/16 职场文书
学校与家长安全责任书
2014/07/23 职场文书
护士辞职信怎么写
2015/02/27 职场文书
税务会计岗位职责
2015/04/02 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
python实现黄金分割法的示例代码
2021/04/28 Python