zoukankan      html  css  js  c++  java

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

     

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

    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.      }  
  • 相关阅读:
    DataGridView 鼠标双击获得行列索引
    浅谈MVC、MVP、MVVM架构模式的区别和联系
    Codeforces 336D Dima and Trap Graph 并查集
    Codeforces 601C Kleofáš and the n-thlon 概率dp
    Codeforces 311B Cats Transport 斜率优化dp
    Codeforces 908F New Year and Rainbow Roads
    Codeforces 12D Ball cdq分治
    Codeforces 291 E Tree-String Problem AC自动机
    Codeforces 932E Team Work 数学
    Codeforces 463E Caisa and Tree
  • 原文地址：https://www.cnblogs.com/lianghong/p/8310482.html
Copyright © 2011-2022 走看看