日韩亚洲AV无码一区二区三区|av在线国产哟哟|国产精品人人爽人人爽AV|免费一区二区精品无码视频

<th id="kwciy"><video id="kwciy"></video></th>
<code id="kwciy"><em id="kwciy"><optgroup id="kwciy"></optgroup></em></code>
    1. <center id="kwciy"></center>

      <code id="kwciy"></code>

      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網(wǎng)絡(luò)科技有限公司微信公眾號

      當前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > JQuery實現(xiàn)&lt;a&gt;標簽平滑滾動到指定節(jié)點位置代碼片段

      JQuery實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置代碼片段

      時間:2018-07-12來源:風信官網(wǎng) 點擊: 719次
      JQuery實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置代碼片段

      風信建站項目開發(fā)過程中應(yīng)用到使用animate動畫函數(shù)實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置,這種效果比起使用scroll到指定地點,用戶在體驗中會感覺更平滑,當然兩種方法各有所長,分享項目實戰(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="最新動態(tài)">最新動態(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;
        });
      });

      效果截圖如下:
      JQuery實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置代碼片段
      JQuery實現(xiàn)<a>標簽平滑滾動到指定節(jié)點位置代碼片段
      欄目列表
      推薦內(nèi)容
      熱點內(nèi)容
      展開