• 當前位置: 首頁 / 廈門建站(zhàn)百科(kē) / 廈門常見(jiàn)問(wèn)題
  • 實現(xiàn)網站(zhàn)錨點鏈接平滑滾動效果

    時間(jiān):2022-12-31 浏覽量: 收藏

    網站(zhàn)前端設計中使用錨點鏈接來(lái)跳(tiào)轉到頁面指定位置的時候,會(huì)生硬地(dì)立即跳(tiào)轉到指定位置,但(dàn)是(shì)有些時候我們想要(yào)平滑地(dì)過渡到指定的位置,那麽可(kě)以使用JQuery簡單的實現(xiàn)平滑滾動效果。需要(yào)的頁面引入以下代碼即可(kě):

    <script src="static/js/jquery-1.12.4.min.js"></script>
    //網站(zhàn)錨點鏈接平滑滾動
    <script type="text/javascript">
        $(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;
              }
            }
          });
        });
    </script>


    錨點鏈接    錨點平滑過渡效果    

    頂一下
    (0)
    0.00%
    踩一下
    0
    0.00%
    加載中~

    相(xiàng)關推薦

    RELATED RECOMMEND

    Copyright © 2012-2024 世敏網絡 版權所有   京ICP證000000号    閩公網安備 35020502000640号        關鍵詞聚合

    世敏網絡

    您已成功複制(zhì)微(wēi)信号,去微(wēi)信立即添加好友!

    打開(kāi)微(wēi)信

    Wechart

    點擊下方複制(zhì)按鈕,複制(zhì)微(wēi)信号!

    jzm866081

    https://www.xmsmwl.cn
    廈門漳州市曙光網絡服務有限公司

    點擊這(zhè)裡(lǐ)聯系在線客服
    嘿!有什麽能幫到您的嗎(ma)?