javascript - 如何为 Bootstrap scrollspy 添加平滑的滚动过渡

标签 javascript jquery html css

我已经开发了单页网站并在我点击导航元素边框底部时使用了引导滚动 spy 之前没有显示这个问题 我已经添加了脚本,现在没有问题了。

但是当我单击导航链接时,平滑滚动不起作用链接直接放置到 没有平滑滚动的特定部分请任何人帮助我

引用:http://floretmedia.net/temp/pbee/

<script>
  $(document).ready(function(){
    var headerHeight = $('header').innerHeight();
    scrollTop: target.offset().top - headerHeight //offset height of header here too.
  });
</script> 
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
  <div class="custom-container">
    <div class="header-right">
      <div class="navbar-holder"> <!-- navbar-holder -->
        <nav class="navbar navbar-default"> <!-- navbar-inverse -->         
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <div class="ease cf">
                <a class="navbar-brand" href="./">
                   <img src="images/logo.png" alt="sfatech Logo">
                </a>
              </div> 
           </div> <!-- /.navbar-header -->
             <div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
                <ul class="nav navbar-nav navbar-right navbrdr">
                  <li class="active"><a href="./">HOME </a></li>
                  <li><a href="#features"> FEATURES </a></li>
                  <li><a href="#plans">PRICING</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>                 
                </ul> <!-- /.navbar-nav -->

             </div> <!--/.nav-collapse -->           
         </nav> <!-- /.navbar-inverse -->
      </div> <!-- /.navbar-holder -->
   </div><!-- header-right -->
  </div><!-- custom-container -->
</header>

最佳答案

你可以试试这个

jQuery(document).ready(function(){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            .preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
            });
        });
    });
})

关于javascript - 如何为 Bootstrap scrollspy 添加平滑的滚动过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52586560/

相关文章:

javascript - 如何存储获取的数据

javascript - React Native 什么是 Props 类型?

javascript - 表单提交后动态依赖下拉列表中没有选项

javascript - jQuery .wrapAll() 和 .unwrap() 问题

html - 垂直调整图像以适应文本

javascript - 如何让 AngularJS 的两个页面共享同一个 $scope?

javascript - 跨域文件上传

javascript - 在 Django 中使用 Ajax 的问题

javascript - 如何通过单击 div 中包含的 anchor 标记来获取跨度数据?

php - 使用 PHP 和 JQuery 重建/刷新 div