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

2024-12-01 11:23:56

本文实例介绍了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程序设计有所帮助。

原生js实现返回顶部缓冲效果

运行原理通过定时器30毫秒执行一次滚动条上升,每次上升的高度为当前高度的80%,这样就达到了上升缓冲的动画效果. 判断当滚动条高度超过一屏时,按钮显示,默认隐藏知识要点 scrollTop//获取滚动条高度需要写兼容 clientHeight//可视窗口高度需要写兼容 setInterval//定时器 window.onscroll//滚动触发事件完整代码 <!DOCTYPE html> <html lang="en"> <head> &l
js返回顶部实例分享

话不多说,请看实例 1.HTML结构 <div class="return_top"></div> 2.css样式 .return_top{ width: 50px; height: 50px; background: url(../images/lanren.gif) no-repeat center #FF8D16; position:fixed; right: 30px; bottom: 30px; display: none; cursor: point
js+JQuery返回顶部功能如何实现

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以
jQuery实现返回顶部功能适合不支持js的浏览器

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top&qu
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
js简单的点击返回顶部效果实现方法

本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum
javascript中返回顶部按钮的实现

炫酷的返回顶部功能 js核心代码 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.
javascript返回顶部效果(自写代码)

现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &
基于Javascript实现返回顶部按钮

一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&
一个简单的弹性返回顶部JS代码实现介绍

昨天做了一个这样的功能,贴出来参考. HTML/JS/CSS代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
javascript实现博客园页面右下角返回顶部按钮

博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 &q

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

相关推荐

随机推荐