Smooth Scroll

index.html

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


<a class="smoothScroll" href="#top" id="bottom">Click here to smooth scroll to the top of the page</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

script.js

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

smooth-scroll.markdown

Smooth Scroll

Smooth Scroll without conflict with other JS files. Added by [class="smoothScroll"]

A Pen by Bryan C Guner on CodePen.

License.

style.css

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