在平时的项目中，经常需要一些特效链接，如果使效果进一步加强，我们可以使点击锚点链接平滑滚动到锚点并不显示锚点“#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>

查看演示