• jquery 返回浏览器顶部


    经常在网页中看到有这样的现象,点击一个按钮,然后页面会跳到页面的中指定的位置,那这种效果是怎么实现的呢?

    很多网页都有这种效果:返回顶部或者跳到不同的楼层(以下是天猫的效果)

    实现原理:

    1.我们来看,左侧导航条是固定不动的,那么这里使用的肯定是position中的固定属性,即position:fixed;

    2.点击导航条之后,就会跳动到不同的楼层,那么我们点击的地方肯定会有关联着这个楼层

    3.那怎么跳到这个楼层呢?我们转换一下思路,所谓的跳到某个楼层,实际上是整个网页的 scrollTop 为某个特殊的值,每次点击导航相同的楼层,总是跳到页面对应的楼层,所以,每次点击相同的导航条按钮时,相关联的scrollTop 总是 固定的

    4.也就是收,当我们点击导航楼层时,即点击事件时,设定页面的scrollTop 就可以实现天猫的这个效果了

    5. 另外:有一种效果,我们不必去获取某个楼层的scrollTop ,直接在楼层中设置一个唯一标识,当点击时,就自动跳到这个标识处,这样也可以实现,这就是a标签的锚点,所谓的唯一标识就是id属性

    但是锚点方法有一个缺点,它没有动画效果,让人感觉不到它已经变化了

     下面我们来试验一下:

    锚点方法:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>Document</title>
     9     <style>
    10         .contain {
    11             padding: 20px 0;
    12             position: relative;
    13             width: 100%;
    14             height: 100%;
    15         }
    16         
    17         .contain div {
    18             position: relative;
    19             margin: 0 auto;
    20             width: 1200px;
    21             height: 430px;
    22             border: 1px solid #ccc;
    23         }
    24         
    25         .daohang {
    26             position: fixed;
    27             top: 145px;
    28             left: 227px;
    29             width: 50px;
    30             height: 80px;
    31             border: 1px solid blue;
    32         }
    33         
    34         li {
    35             width: 100%;
    36             height: 20px;
    37         }
    38     </style>
    39 </head>
    40 
    41 <body>
    42     <div class="contain">
    43         <div class="box1">
    44             <span id="lou1">huanying2015:这是楼层111111111111111111</span>
    45         </div>
    46         <div class="box2">
    47             <span id="lou2">huanying2015:这是楼层2222222222222222222</span>
    48         </div>
    49         <div class="box3 " style="height:1000px;">
    50             <span id="lou3">huanying2015:这是楼层3333333333333333333</span>
    51         </div>
    52         <ul class="daohang">
    53             <a href="#lou1" class="a">
    54                 <li>导航1</li>
    55             </a>
    56             <a href="#lou2" class="a">
    57                 <li>导航2</li>
    58             </a>
    59             <a href="#lou3" class="a">
    60                 <li>导航3</li>
    61             </a>
    62         </ul>
    63     </div>
    64 </body>
    65 
    66 </html>

    运行结果:

    2.另一个就是使用 jquery 或者js 来改变scrollTop 的值

     加入js:

     1 <script>
     2         $(function() {
     3             $("ul.daohang a").on("click", function() {
     4                 var index = $(this).index() + 1;
     5                 var Oscrolltarget = $("#lou" + index).offset().top;
     6                 $("html,body").animate({
     7                     "scrollTop": Oscrolltarget + 'px'
     8                 }, 300);
     9 
    10             });
    11         });
    12     </script>

    html代码:先加入jquery,再将导航栏的a链接去掉,如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     8     <title>Document</title>
     9     <style>
    10         .contain {
    11             padding: 20px 0;
    12             position: relative;
    13              100%;
    14             height: 100%;
    15         }
    16         
    17         .contain div {
    18             position: relative;
    19             margin: 0 auto;
    20              1200px;
    21             height: 430px;
    22             border: 1px solid #ccc;
    23         }
    24         
    25         .daohang {
    26             position: fixed;
    27             top: 145px;
    28             left: 227px;
    29              50px;
    30             height: 80px;
    31             border: 1px solid blue;
    32         }
    33         
    34         li {
    35              100%;
    36             height: 20px;
    37         }
    38     </style>
    39 
    40 
    41 </head>
    42 
    43 <body>
    44     <div class="contain">
    45         <div class="box1">
    46             <span id="lou1">huanying2015:这是楼层111111111111111111</span>
    47         </div>
    48         <div class="box2">
    49             <span id="lou2">huanying2015:这是楼层2222222222222222222</span>
    50         </div>
    51         <div class="box3 " style="height:1000px;">
    52             <span id="lou3">huanying2015:这是楼层3333333333333333333</span>
    53         </div>
    54         <ul class="daohang">
    55             <a href="javascript:;" class="a">
    56                 <li>导航1</li>
    57             </a>
    58             <a href="javascript:;" class="a">
    59                 <li>导航2</li>
    60             </a>
    61             <a href="javascript:;" class="a">
    62                 <li>导航3</li>
    63             </a>
    64         </ul>
    65     </div>
    66 </body>
    67 
    68 </html>
    View Code

    运行结果:

  • 相关阅读:
    AutoResetEvent 2
    AutoResetEvent
    c++ 控制台输入参数
    C# .Net 多进程同步 通信 共享内存 内存映射文件 Memory Mapped
    filezilla管理网站服务器
    matlab
    WCF:无法满足对安全令牌的请求,因为身份验证失败。
    WCF 学习
    dev
    dotnetbar
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8899317.html
Copyright © 2020-2023  润新知