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绝句欣赏 一些经典的js代码
Feb 22 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
JS中Array数组学习总结
Jan 18 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 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
网站当前的在线人数
2006/10/09 PHP
PHP 强制下载文件代码
2010/10/24 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP类的特性实例分析
2016/09/28 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
js下载文件并修改文件名
2017/05/08 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python 编码规范整理
2018/05/05 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
css sprite简单实例
2016/05/23 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
上海方立数码笔试题
2013/10/18 面试题
应届毕业生自荐信例文
2014/02/26 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
承诺书范本大全
2015/05/04 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
导游词之五台山
2019/10/11 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang