<h1 class="title" id="top">Imagine your things at the top</h1>
<!-- Everything that you want smooth scrolling you should put that class -->
<!-- Remember: that's because i changed the script -->
<a class="smoothScroll" href="#bottom">Click here to smooth scroll to the bottom of the page</a>
<div class="content"></div>
<h1 class="title">And here the content that the user will reach through the link<small>sorry for the bad english</small></h1>
<!-- Always put the class="smoothScroll" -->
<!-- Always make sure to put href="#some-local-id" -->
<a class="smoothScroll" href="#top" id="bottom">Click here to smooth scroll to the top of the page</a>

<!-- Get jQuery down below so it can work properly -->
<!-- You can get any other version, it's just an example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Change the speed of the scroll in the JS file. Follow the instructions there -->

.smoothScroll {
  text-decoration: none;
	font-family: Segoe UI;
  margin: 24px;
}
.title {
  text-decoration: none;
	font-family: Segoe UI;
  margin: 24px;
}
.content {
  margin-top: 100%;
  margin-bottom: 100%;
}
small {
  margin-left: 24px;
  color: gray;
}

$(function() {
  // This will select everything with the class smoothScroll
  // This should prevent problems with carousel, scrollspy, etc...
  $('.smoothScroll').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
        }, 1000); // The number here represents the speed of the scroll in milliseconds
        return false;
      }
    }
  });
});

// Change the speed to whatever you want
// Personally i think 1000 is too much
// Try 800 or below, it seems not too much but it will make a difference