jQuery Plugin For Smooth Page Scrolling with Fancy Effects - anchorScroll

anchorScroll is a jQuery plugin that allows your anchor link to smoothly scroll to an specified section / position within the document, in addition to adding a CSS class to a specific element so that you can create a custom CSS based effect when vertical page scrolling.

How to use it:

1. Download the anchorScroll plugin and include the jquery.anchorScroll.min.js script after jQuery library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.anchorScroll.min.js"></script>

2. Create an anchor link which allows you to smoothly scroll the page to section '#test'.

<a href="#test" class="anchor-scroll"></a>

3. Initialize the plugin to active the smooth page scrolling.

 $('.anchor-scroll').anchorScroll();

4. Add a custom CSS class to a specific element while page scrolling.

<a href="#test" class="anchor-scroll"
   data-class-to="body" 
   data-scoll-start="class-1"
   data-scroll-end="class-2"
></a>

5. Determine whether to keep the class that is added when scrolling starts/ends.

<a href="#test" class="anchor-scroll"
   data-class-to="body" 
   data-scoll-start="class-1"
   data-scroll-end="class-2"
   data-keep-start
   data-keep-end
></a>

6. This will assign the CSS class 'class-1' to your 'body' tag when the page stars scrolling. You can also use data-scroll-end to assign a CSS class to the 'body' tag when stops scrolling.

.class-1 {
  /* cool CSS3 aniamtions here */
}

.class-2 {
  /* cool CSS3 aniamtions here */
}

7. Available options.

$('.anchor-scroll').anchorScroll({

  // scroll speed
  scrollSpeed: 800,

  // top offset in pixels
  offsetTop: 0,

  // callbacks
  onScroll: function () { 
    // callback on scroll start
  },

  scrollEnd: function () { 
    // callback on scroll end
  }
  
});

Changelog:

2022-02-05

• Changed data attribute data-on-scroll to data-scroll-start
• Added keep class options
• Code cleanup

---

This awesome jQuery plugin is developed by virgiliud. For more Advanced Usages, please check the demo page or visit the official website.