我們?yōu)g覽一些網(wǎng)站的時(shí)候，會(huì)發(fā)現(xiàn)點(diǎn)擊導(dǎo)航條上的鏈接的時(shí)候，頁(yè)面會(huì)非常平滑的滾動(dòng)網(wǎng)頁(yè)下面相應(yīng)的位置，相對(duì)于瀏覽器默認(rèn)的一下子跳過(guò)去，用戶(hù)體驗(yàn)無(wú)疑友好了許多，其實(shí)顯示這種效果只需要簡(jiǎn)單的一段 jQuery 代碼。

$(function() {
  $('a[href*=#]:not([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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

在結(jié)合點(diǎn)擊回到頂部的功能，一個(gè)非常漂亮切用戶(hù)體驗(yàn)非常友好的單頁(yè)面導(dǎo)航效果就出來(lái)了。