html 代码:
- <div class="header">
- <img class="logo" src="./images/[email protected]" />
- <ul class="nav-list">
- <!-- href 作锚点用, id 是 JS 时用, 必须是 a 便签的时候来进行锚链接 -->
- <li class="sel"><a href="#home" id="nav-home"> 首页 </a></li>
- <li><a href="#service" id="nav-ser"> 服务优势 </a></li>
- <li><a href="#about" id="nav-about"> 关于我们 </a></li>
- <li class="last"><a href="#contact" id="nav-con"> 联系我们 </a></li>
- </ul>
- </div>
- <div class="banner"></div>
- <div class="content" id="service">
- </div>
JS 代码:
- $(function () {
- $("#nav-ser,#nav-about,#nav-con,#nav-home").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) {
- var targetOffset = $target.offset().top;
- $('html,body').animate({ scrollTop: targetOffset }, 800);
- return false;
- }
- }
- });
- });
来源: http://www.bubuko.com/infodetail-3304847.html