Question

如何使用导航栏在没有任何连接的情况下使用页面向下滚动in this example，尤其是在JavaScript部分？

我想要发生的事情就像在示例中一样：一旦用户点击按钮，它将直接转到部分页面，它应该与样本链接一样平滑滚动。

这是我的示例代码

<div class="jumbotron">

<div class="career-jumbotron">
    <div class="container">
        <a href="#opportunities" class="page-scroll btn btn-xl">
         Button</a>
    </div>
</div> 
<section id="opportunities">
    <div class="container">

    -----sample text-----

    </div>
</section>

Answer 1

以下是一个javascript代码段，用于平滑滚动相同页面链接，它会监视并将平滑效果应用于以#开头的所有链接

您需要添加jQuery库

 $(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 - 135) // adjust this according to your content
           }, 1000);
           return false;
         }
       }
   });
 });

当用户单击按钮时，Bootstrap向下滚动

1 个答案: