Bootstrap scroll-down when the user clicks the button

Question

How to use the page-scroll down like in this example without any connection using a nav bar, especially on the JavaScript part?

What I want to happen is like in the example: once the user click the button it will directly go to the section page and it should be smooth scrolling same as with the sample link.

Here's my sample code

<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

Here is a javascript snippet to get a smooth scrolling same page links, it watches and apply the smooth effect to all links starting with #

You need to add jQuery library

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