Skip to content

A lightweight JavaScript utility for smooth scrolling to anchor targets and adding classes to elements.

License

Notifications You must be signed in to change notification settings

virgiliud/anchorScroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

anchorScroll.js

A lightweight JavaScript utility for smooth scrolling to anchor link targets while adding custom classes to elements and invoking callbacks.

View Demo

Usage

Initialization

Initialize the functionality on elements with the class .anchor-scroll:

document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.anchor-scroll');
    
    elements.forEach(el => {
        new AnchorScroll(el, {
            offsetTop: 0, // offset for fixed top navigation bars
            scrollStart: function() {
                console.log('scroll start');
            },
            scrollEnd: function() {
                console.log('scroll end');
            }
        });
    });
});

Data Attributes

  • data-class-to: (string) The element to which a class is added on scroll events. Include the dot(.) or hash(#) in the value. data-class-to is not required if you are adding the class to the anchor link's target. Set this as the value to add the class to the clicked anchor link itself.
  • data-scroll-start: (string) Class name added when scrolling starts (the class is removed when scrolling ends).
  • data-scroll-end: (string) Class name added when scrolling ends (the class is removed when scrolling starts again).
  • data-keep-start: (boolean) Keep the class that is added when scrolling starts. The attribute does not require a value.
  • data-keep-end: (boolean) Keep the class that is added when scrolling ends. The attribute does not require a value.

HTML Examples

Adding data attributes to anchor links:

<!-- Add class "collapse" to the anchor link's target (#div-1) after scrolling ends -->
<a class="anchor-scroll" href="#div-1" data-scroll-end="collapse"></a>

<!-- Add class "blur-effect" to the body on scroll -->
<a class="anchor-scroll" href="#div-2" data-scroll-start="blur-effect" data-class-to="body"></a>

<!-- Add class "seen" to the anchor link's target (#div-3) after scrolling ends and keep the class -->
<a class="anchor-scroll" href="#div-3" data-scroll-end="seen" data-keep-end></a>

About

A lightweight JavaScript utility for smooth scrolling to anchor targets and adding classes to elements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published