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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
js比较日期大小的方法
May 12 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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的access操作类
2008/04/09 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
详解ES6中的let命令
2020/04/05 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
关键字final的用法
2013/10/02 面试题
护理工作感言
2014/01/16 职场文书
教师绩效工资方案
2014/02/01 职场文书
《理想》教学反思
2014/02/17 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
教师自查自纠材料
2014/10/14 职场文书
小学运动会宣传稿
2015/07/23 职场文书
工伤调解协议书
2016/03/21 职场文书