Smooth Page Scrolling with Fancy Effects - anchorScroll.js

anchorScroll is a jQuery JavaScript 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 package and include the anchorScroll.min.js script on the page.

<script src="/path/to/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.

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.anchor-scroll');
  elements.forEach(el => {
    new AnchorScroll(el, {
      // options here
    });
  });
});

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

<a href="#test" class="anchor-scroll"
   data-class-to="body" 
   data-scroll-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-scroll-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.

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.anchor-scroll');
  elements.forEach(el => {
    new AnchorScroll(el, {

        // top offset in pixels
        offsetTop: 0,

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

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

Changelog:

2024-03-12

• Fixed demos
• Updated doc

2023-09-19

• Fixed multiple class names

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.