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中String和StringBuffer的速度之争
Apr 01 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
JavaScript 数组去重详解
Sep 15 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语言流程控制中的主动与被动
2012/11/05 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Web程序工作原理详解
2014/12/25 PHP
discuz目录文件资料汇总
2014/12/30 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php编程每天必学之验证码
2016/03/03 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
kali中python版本的切换方法
2019/07/11 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
python 安装移动复制第三方库操作
2020/07/13 Python
创伤外科专业推荐信范文
2013/11/19 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
群众路线领导对照材料
2014/08/23 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android