页面中加入回到顶部按钮的实现方法(转)

 

页面中加入回到顶部按钮的实现方法

2016-07-23 17:03 204人阅读 评论(0) 收藏 举报

版权声明：本文为博主原创文章，未经博主允许不得转载。

        有时候我们在浏览网页时，看完了所有的信息，此时若需要返回顶部，不应该滑动滚动条而应使用一个快捷的方法立刻返回。简单列出几种方法：

 一、使用锚标记返回页面顶部 

      使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。 
      页面顶部放置： 
     <a name="top" id="top"></a> 
    放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。 
     页面底部放置： 
   <a href="#top" target="_self">返回顶部</a> 

二、使用Javascript Scroll函数返回顶部 

scrooll函数用来控制滚动条的位置，有两种很简单的实现方式： 
方式1： 
<a href="javascript:scroll(0,0)">返回顶部</a> 
scroll第一个参数是水平位置x，第二个参数是垂直位置y，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。 
方式2： 
本方式是渐进式返回顶部，要好看一些，代码如下：  

[javascript] view plain copy
 
  1. function pageScroll() {   
  2. window.scrollBy(0,-10);   
  3. scrolldelay = setTimeout('pageScroll()',100);   
  4. }   
  5. <a href="pageScroll();">返回顶部</a>   

三、综合使用Javascript函数和window.scroll功能实现动态返回顶部 

可自行定义其滑动速度

html元素：

[html] view plain copy
 
  1. <h1>标题</h1>  
  2.     <div class="settop">                
  3.       <input type="button" value="返回顶部" id="top" onclick="goback()">  
  4.     </div>  

css样式：

[css] view plain copy
 
  1. body,input{margin:0;padding:0;}  
  2.        .settop { 100px;  
  3.                 height: 30px;    
  4.                 position: fixed;  
  5.                 bottom:50px;  
  6.                 right:50px;  
  7.                 z-index: 2;  
  8.                 display: none;  
  9.                }  
  10.         .settop input{100px;  
  11.                       height:30px;  
  12.                       outline: none;  
  13.                       font-size: 17px;  
  14.                       border-radius:10px;}   
  15.           body {  
  16.                overflow-y: scroll;  
  17.                height: 3000px;  
  18.                 90%;  
  19.                border: 1px solid red;  
  20.           }  
  21.     }  
JavaScript代码：

向下滚动到一定高度显示返回按钮，否则会隐藏按钮

代码实现：

1原生JS：

[javascript] view plain copy
 
  1. window.onscroll = function(){   
  2.     //考虑到浏览器的兼容性  
  3.     //chrome 支持body，IE，firefox支持documentElement  
  4.     //safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset  
  5.   var t = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;   
  6.    var top_div = document.getElementsByClassName( "settop")[0];   
  7.     var num=300;  //自定义设置显滑动多少距离显示  
  8.     if( t >= num ) {   
  9.      top_div.style.display = "inline";   
  10.    } else {   
  11.      top_div.style.display = "none";   
  12.    }   
  13.   }   
2.jQuery代码：
[javascript] view plain copy
 
  1. $(function(){  
  2.         $(window).scroll(function(){  
  3.             var num=300;  
  4.         if($(window).scrollTop() >= num)  
  5.             {$(".settop").show();}  
  6.         else  $(".settop").hide();  
  7.         });       
  8.     });  

触发事件返回向上滑动goback（）函数回到顶部：
[javascript] view plain copy
 
  1. function goback(){  
  2.         window.scrollBy(0,-200); //每次滑动的像素距离  
  3.         scrollDelay = setTimeout('goback()',30); //调用时间  
  4.         var stop = document.documentElement.scrollTop+document.body.scrollTop;  
  5.         if(stop==0)  
  6.             clearTimeout(scrollDelay);  
  7.         scroll(0,0);  
  8.      }  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lianghong/p/8310482.html