海南苯概企业管理有限公司

JQuery實(shí)現(xiàn)<a>標(biāo)簽平滑滾動(dòng)到指定節(jié)點(diǎn)位置代碼片段

風(fēng)信建站項(xiàng)目開發(fā)過程中應(yīng)用到使用animate動(dòng)畫函數(shù)實(shí)現(xiàn)<a>標(biāo)簽平滑滾動(dòng)到指定節(jié)點(diǎn)位置，這種效果比起使用scroll到指定地點(diǎn)，用戶在體驗(yàn)中會(huì)感覺更平滑，當(dāng)然兩種方法各有所長，分享項(xiàng)目實(shí)戰(zhàn)片段代碼如下：

HTML代碼：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1 navbar-fixed-top">
            <h1 class="logo"><a href="">?快樂校外</a></h1>
        </div>
        <div class="col-lg-8 col-md-offset-3">
            <ul id="navmenu">
                <li><a href="/" title="首頁">?首頁</a></li>
                <li><a href="#teacher" class="topLink" title="?瀏覽教師">?瀏覽教師</a></li>
                <li><a href="/" title="開始約課">?開始約課</a></li>
                <li><a href="#process" class="topLink" title="上課流程">?上課流程</a></li>
                <li><a href="/" title="最新動(dòng)態(tài)">最新動(dòng)態(tài)</a></li>
            </ul>
        </div>
    </div>
</div>   

JQuery代碼：

$(document).ready(function() {
  $("#navmenu li a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 1000,
      easing: "swing"
    });
    return false;
  });
});

效果截圖如下：