<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>js锚点滚动效果</title> <style> ul>li{float: left;margin: 10px ;} .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfix{zoom:1} .step{width:80%;height:1300px;border:10pxsolidred;margin:0auto;} </style> </head> <body> <ulclass="clearfix"> <li><ahref="#step1">#step1</a></li> <li><ahref="#step2">#step2</a></li> <li><ahref="#step3">#step3</a></li> </ul> <div> <divid="step1"class="step">step1</div> <divid="step2"class="step">step2</div> <divid="step3"class="step">step3</div> </div> </body> <scriptsrc="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script> //页面锚点滚动js $('a[href*=#],area[href*=#]').click(function { if (location.pathname.replace(/^//, '') ==this.pathname.replace(/^//, '') &&location.hostname ==this.hostname) { var$target=$(this.hash); $target=$target.length &&$target||$('[name='+this.hash.slice(1) +']'); if ($target.length) { vartargetOffset=$target.offset.top; $('html,body').animate({ scrollTop: targetOffset }, 1000); returnfalse; } } }); //页面锚点滚动js结束 </script> </html> |
