Question

我已经开发了单页网站，并在单击导航项目边框底部时未使用bootstrap滚动间谍来显示此问题我已经添加了脚本，现在没有问题了。

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

<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>

Answer 1

您可以尝试这个

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

Answer 2

在没有JavaScript的情况下，将此代码添加到CSS文件中

html{
    scroll-behavior: smooth;
}

如何为Bootstrap滚动间谍添加平滑的scrool过渡

2 个答案: