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 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JS实现手风琴特效
Nov 08 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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
js实现列表按字母排序
2020/08/11 Javascript
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python程序变成软件的实操方法
2019/06/24 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
客户表扬信范文
2014/01/10 职场文书
社区春季防火方案
2014/06/02 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
行政司机岗位职责
2015/04/10 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
环保证明
2015/06/23 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
redis实现共同好友的思路详解
2021/05/26 Redis