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正则表达式中参数g(全局)的作用
Nov 11 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
vue实现底部菜单功能
Jul 24 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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 闭包特性在实际应用中的问题
2009/10/30 PHP
深入PHP变量存储的详解
2013/06/13 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
节能环保标语
2014/06/12 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang