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             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 
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

运行结果：

posted on 2018-04-21 10:37 huanying2015 阅读(228) 评论(0) 编辑收藏举报