jQuery实现页面内锚点平滑跳转特效的方法总结

通过jQuery实现页面内锚点平滑跳转的方法很多，可以通过插件hovertreescroll实现，也可以简单的通过animate方法实现，下面介绍这2种比较简单的方法。

 

平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。
 

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="UTF-8">  
5. <title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />  
6. <style type="text/css"> 
7. #hovertree {  
8. height: 800px;  
9. background: red;  
10. text-align:center;color:white;  
11. } 
12.   
13. #keleyi {  
14. height: 800px;  
15. background: green;text-align:center;color:white;  
16. } 
17.   
18. #myslider {  
19. height: 800px;  
20. background: black;text-align:center;color:white;  
21. } 
22.   
23. #zonemenu {  
24. height: 800px;  
25. background: yellow;text-align:center;  
26. }  
27.   
28. .keleyilink{position:fixed;}  
29. .keleyilink a {text-decoration:none;}  
30. </style>  
31. </head>  
32. <body>  
33. <div class="keleyilink">  
34. <a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>  
35. <a href="javascript:scroll('keleyi');" target="_self">KKK</a>  
36. <a href="javascript:scroll('myslider');" target="_self">myslider</a>  
37. <a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>  
38. </div>  
39. <div id="hovertree">hovertree  
40. <br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a>  
41. </div>  
42. <div id="keleyi">jb51</div>  
43. <div id="myslider">myslider</div>  
44. <div id="zonemenu">zonemenu</div>  
45. <script src="jquery/jquery-1.11.3.min.js"></script>  
46. <script src="jquery.hovertreescroll.js"></script>  
47. <script>  
48. function scroll(id) {  
49. $("#" + id).HoverTreeScroll(1000);  
50. }  
51. </script>  
52. </body>  
53. </html>