<video id="i0ich"><input id="i0ich"></input></video>
  • <video id="i0ich"></video>
  • <u id="i0ich"></u>

    <i id="i0ich"><bdo id="i0ich"></bdo></i>

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

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

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

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

    時間:2024-02-21來源:風信官網 點擊: 444次
    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>標簽平滑滾動到指定節點位置代碼片段
    欄目列表
    推薦內容
    熱點內容
    展開
    中文字字幕在线中文无码