经常在网页中看到有这样的现象，点击一个按钮，然后页面会跳到页面的中指定的位置，那这种效果是怎么实现的呢?
很多网页都有这种效果：返回顶部或者跳到不同的楼层（以下是天猫的效果）
实现原理：
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>
运行结果：
