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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
jquery实现图片切换代码
Oct 13 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
js+css实现打字效果
Jun 24 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
js实现简单音乐播放器
Jun 30 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
解析isset与is_null的区别
2013/08/09 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
无刷新上传文件并返回自定义值
2015/06/11 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue.js中过滤器的使用教程
2017/06/08 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
Python性能优化技巧
2015/03/09 Python
Python实现队列的方法
2015/05/26 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python对Excel的读取的示例代码
2020/02/14 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
物业经理自我鉴定
2014/03/03 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
刮痧观后感
2015/06/05 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
Java中的随机数Random
2022/03/17 Java/Android