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

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;
         }
       }
   });
 });