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

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

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

    <script src="https://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%

    加载中~

    Copyright © 2012-2024 世敏网络 版权所有   闽ICP备18026760号-1    闽公网安备 35020502000640号   网站地图    Sitemap   关键词聚合

    世敏网络

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

    打开微信

    Wechart

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

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?