源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-06-30 01:04 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript返回顶部的按钮实现方法
本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下 [b]html:[/b]
<a href="javascript:;" id="btn" title="回到顶部"></a>
[b]css:[/b]
#btn{position:fixed;display:none;}
[b]script:[/b] 获取滚动条高度:[b]document.documentElement.scrollTop || document.body.scrollTop[/b] 获取可视区高度:[b]document.documentElement.clientHeight [/b]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程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部