QY千亿国际

  • 当前位置: 首页 / 建站百科 / 常见问题
  • 实现网站锚点链接平滑滚动效果

    时间:2022-12-31 浏览量: 收藏

    网站前端设计中使用锚点链接来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候QY千亿国际想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现平滑滚动效果。需要的页面引入以下代码即可:

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    //网站锚点链接平滑滚动
    <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%

    QY千亿国际网络

    您已成功复制微信号,去微信立即添加好友!

    打开微信

    Wechart

    点击下方复制按钮,复制微信号!

    jzm866081

    //lqelsmm.com
    厦门QY千亿国际网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?
    QY千亿国际 QY千亿国际 QY千亿国际 QY千亿国际 qy千亿·体育 qy千亿·体育 qy千亿·体育 qy千亿·体育