javascript实现回到顶部特效


Posted in Javascript onMay 06, 2015

HTML:

<input id="btn1" type="button" value="回到顶部" />

CSS:

#btn1{position:fixed;bottom:10px;right:10px;}

JS:

window.onload=funcition(){
  var oBtn=document.getElementById("btn");
  var timer=null;
  //申明一个变量看是否为系统还是用户滚动
  var sBys=true;
  window.onscroll=funcition(){
    if(!sBys){
      clearInterval(timer);
    }
    sBys=false;
  }
  oBtn.onclick=funcition(){
    timer = setInterval(funcition(){
      //获取scrollTop
      var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
      //当点击按钮回到顶部时计算缓冲速度
      var ispeed=Math.floor(-scrollTop/8);
      if(scrollTop==0){
        clearInterval(timer)
      }
      sBys=true;
      document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
    },30)
  }
}

知识点:

1.计算速度(缓冲)向下取整
2.当scrollTop==0时需要清除定时器
3.需要判断是用户还是js操作滚动条,如果是用户操作就清除定时器

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript学习笔记(八) js内置对象
Jun 19 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
javascript实现完美拖拽效果
May 06 #Javascript
avalonjs实现仿微博的图片拖动特效
May 06 #Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python实现合并两个排序的链表
2019/03/03 Python
python3安装crypto出错及解决方法
2019/07/30 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Java语言程序设计测试题改错题部分
2014/07/22 面试题
英文演讲稿
2014/05/15 职场文书
家长会欢迎标语
2014/06/24 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
2015双创工作总结
2015/07/24 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
四年级作文之植物
2019/09/20 职场文书