javascript返回顶部的按钮实现方法


Posted in Javascript onJanuary 09, 2016

本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下

html:

<a href="javascript:;" id="btn" title="回到顶部"></a>

css:

#btn{position:fixed;display:none;}

script:

获取滚动条高度:document.documentElement.scrollTop || document.body.scrollTop

获取可视区高度:document.documentElement.clientHeight
js代码

window.onload = function(){
  var obtn = document.getElementById('btn');
  //获取页面可视区的高度
  var clientHeight = document.documentElement.clientHeight;
  var timer = null;
  var isTop = true;
  window.onscroll = function(){
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight){
    //显示按钮
      obtn.style.display = 'block';
    }else {
    //隐藏按钮
      obtn.style.display = 'none';
    }
    if (!isTop){
      clearInterval(timer);
    }
    isTop = false;
  };
  obtn.onclick = function(){    
    //设置定时器
    timer = setInterval(function(){
      //获取滚动条距离顶部的高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 6);
      document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
      
      isTop = true;
      if (osTop === 0){
        clearInterval(timer);
      }
    },30);
  };
};

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
iview table高度动态设置方法
Mar 14 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python读写配置文件的方法
2015/06/03 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
工会优秀工作者事迹
2014/08/17 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
六一儿童节开幕词
2015/01/29 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Python面向对象之成员相关知识总结
2021/06/24 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
python缺失值填充方法示例代码
2022/12/24 Python