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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
深入研究React中setState源码
Nov 17 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
探讨php中header的用法详解
2013/06/07 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
10款最好的Python开发编辑器
2019/07/03 Python
python根据多个文件名批量查找文件
2019/08/13 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
村官学习十八大感想
2014/01/15 职场文书
出国考察邀请函
2014/01/21 职场文书
总经理任命书
2014/03/29 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python