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.

Related Posts

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

swiper-touch-slider

Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-steps-plugin

[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

VenoBox-Responsive-jQuery-Lightbox-Plugin

Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *