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简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
layui对工具条进行选择性的显示方法
Sep 19 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中动态显示签名和ip原理
2007/03/28 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
vue中如何去掉空格的方法实现
2018/11/09 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
linux下python抓屏实现方法
2015/05/22 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python实现Zabbix-API监控
2018/09/17 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
学生会主席演讲稿
2014/04/25 职场文书
低碳环保标语
2014/06/12 职场文书
入股合作协议书
2014/10/12 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL