實現錨點的帶動畫效果---不是突然跳轉到指定地方

html代碼：

<div class="header">
  <img class="logo" src="./images/[e-mail]" />
  <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;
      }
    }
  });
});