jQuery Plugin to Animate Scrolling to Anchor Links

jquery.smoothscroll.js is an easy and lightweight scrollable jQuery plugin that makes internal anchors smoothly scroll a web page to a specific DIV (or another point) within the document.

Jquery smooth scroll plugin for triggering scrolling to anchor links within a document. Behavior like the Scroll-Conduct CSS property.

More features:

  • Animation duration is configurable.
  • Optional dilution functions.
  • A hashtag is also supported.
  • Automatic groups focus on the destination item.

How to make use of it:

1. Download the package and put the primary script anchor.js after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/anchor.js"></script>

2. Create an anchor link on the web page and specify the target level utilizing the data-anchor attribute as follows:

...
<button id="acceptTerms"> I have read and accept the Terms and Conditions</button>
...
<a data-anchor="#acceptTerms" class="anchor"> Scroll To Anchor </a>

3. Override the default data attribute:

$(function () {
  $('.anchor[data-anchor]').on("click", function(e) {
    e.preventDefault();
    let target = $(this).attr("data-anchor");     
    scrollToAnchor(target);
  })
});

4. Specify the duration of the animation.

$(function () {
  $('.anchor[data-anchor]').on("click", function(e) {
    e.preventDefault();
    let target = $(this).attr("data-anchor");     
    scrollToAnchor(target, 3000);
  })
});

Scroll To Anchor Plugin, jquery.smoothscroll.js Github, jquery scrollto, jquery scroll to element, smooth scroll jquery plugin, jquery scroll to anchor, jquery smooth scroll to another page


See Demo And Download

Official Website(ixkaito): Click Here

This superior jQuery/javascript plugin is developed by ixkaito. For extra Advanced Usage, please go to the official website.

Share