在平时的项目中,经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点并不显示锚点“#snacks”
下面是一组实例:
HTML
<ul> <li><a href="#snacks">哈士奇零食</a></li> <li><a href="#toy">哈士奇玩具</a></li> <li><a href="#drug">哈士奇药品</a></li> <li><a href="#leash">哈士奇牵引绳</a></li> <li><a href="#shower-gel">哈士奇沐浴露</a></li> </ul>
引入jquery
<!-- jQuery --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
在jquery后调用
<script type="text/javascript"> $(function(){ $('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) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 500); return false; } } }); }) </script>