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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
Ext 今日学习总结
Sep 19 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
浅析前端路由简介以及vue-router实现原理
Jun 01 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
python实现批量命名照片
2020/06/18 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
区域经理岗位职责
2015/02/02 职场文书
商标侵权律师函
2015/05/27 职场文书
投诉书范文
2015/07/02 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android