Anchor-Smooth-Scroll

This will transform traditional scroll into smooth scrolling effect in a page using anchor links.

Amaze your visitors by adding a smooth scroll effects to anchor links in your website. By adding this little javascript into your webpage and adding extra attribute into your link, you can have a smooth scoll effect in your anchor links.

There are only two steps to make smooth scroll works

1. Initialize the Javascript
2. Add target to anchor link

1. Initializing Javascript

After downloading the code, unzip it and copy the javascript file into the js folder of your website. Initialize the javascript below the jQuery library.

Example

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/anchor-smooth-scroll.js"></script>

Define the target elements

The example below will make all <a> tags as target and any <a> tags that contains data-target attribute will have the smooth scroll effect to its target.

<script>
  jQuery(document).ready(function($) {
    $('a').smoothScroll();
  });
</script>

2. Adding target to achor links

Smooth scroll will activate whenever you added a data-target attribute into your links. Smooth scroll will not work if the defined target element is empty.

Example

<a href="#" data-target="#example-1">Example 1</a>
<!-- Content -->
<div id="example-1">...</div>