Animated Scroll Down to Anchor

With the help of CSS and Jquery, We can easily add animated scroll down to the anchor button to allow the user to navigate to the content.

This button helps your site visitor to navigate through your website without having the manually scroll.

This tutorial will provide you with code and demo that you need to add on your website anchor button and the Javascript code enable scroll down functionality when a link is clicked.

It’s a good idea to add Smooth Scroll Animation instead of Jump the page because of the animation enhance the wroth of the site.

We have included 10 different animated Icons as well so you can choose the one you like.

How to Add Animated Scroll Down to Anchor

Let’s start with the implementation, Simply add the required files. There is a CSS and Javascript file and also need to add the main jQuery file.

<link rel="stylesheet" href="css/style.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/index.js"></script>

HTML is also simple and easy to understand. You need to define a section with a unique ID.

<section id="section01" class="demo">
  <h1>Scroll Down Button #1</h1>
  <a href="#section02"><span></span>Scroll</a>
</section>

That’s It.

The Javascript

For Javascript, We have a simple function which allows to add an animation for HTML/Body and also allow to define offset.

$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});