如何实现网站锚点链接平滑滚动

做锚点链接的方法

①：设置一个HTML锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值特别前面要加#）

②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容。

锚点链接平滑滚动

一般使用锚点来跳转到页面指定位置的时候，会生硬地立即跳转到指定位置，但是有些时候我们想要平滑地过渡到指定的位置，那么可以使用JQuery简单的实现平滑滚动效果。

只需要在网站的底部模板代码</body>上面添加以下的代码就可以了。

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<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

        },

        1000);

        return false;

      }

    }

  });

})

</script>