1. <source id="rxoyr"><mark id="rxoyr"></mark></source>

    <b id="rxoyr"><address id="rxoyr"><bdo id="rxoyr"></bdo></address></b>
  2. <source id="rxoyr"></source>
    <u id="rxoyr"><sub id="rxoyr"></sub></u><var id="rxoyr"><td id="rxoyr"></td></var><b id="rxoyr"></b>

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

      孝感風信網絡科技有限公司微信公眾號

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

      JQuery實現<a>標簽平滑滾動到指定節點位置代碼片段

      時間:2024-05-20來源:風信官網 點擊: 565次
      JQuery實現<a>標簽平滑滾動到指定節點位置代碼片段

      風信建站項目開發過程中應用到使用animate動畫函數實現<a>標簽平滑滾動到指定節點位置,這種效果比起使用scroll到指定地點,用戶在體驗中會感覺更平滑,當然兩種方法各有所長,分享項目實戰片段代碼如下:

      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="最新動態">最新動態</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實現<a>標簽平滑滾動到指定節點位置代碼片段
      JQuery實現<a>標簽平滑滾動到指定節點位置代碼片段
      欄目列表
      推薦內容
      熱點內容
      展開
      欧美高清cheng人_亚洲人AV在线不卡_精品国产亚洲一区二区在线_免费精品自在久久_最新亚洲人成在线观看