JavaScript Library To Trigger A Callback Whenever The User Scrolls | AnchorTrigger

AnchorTrigger is a lightweight JavaScript library to run or trigger a callback whenever a user passes through an anchor. A simple use case is to change the active navigation when hovering in a new section in the view.

It’s designed to be efficient, for example, callbacks are reduced to 50ms rather than persisted (you can change that). The library has no dependencies and is only 1k when compressed in gz format. The source should be very straightforward and easy to update. It is written in plain old ES5.

Trigger Functions When You Scroll To An Element | VueWaypoint

How to make use of it:

To get started, simply include the anchor-Trigger.js at the bottom of the webpage.

<script src="anchor-trigger.js"></script>

Basic use:

var obj = AnchorTriggre( listOfAnchorNames, callback, [options] )

The available choices.

// tags to query as anchors. 
query: 'a',  

// Only call callback when anchor has changed.
onlyOnChange: true /

// fraction of page (top to bottom or left to right)  to trigger new area.
fraction: .5,   

// Delay to throttle calls during scroll
delay: 50,

// The element we are watching for scroll. 
bind: window,    

// Direction of scroll
// 'top' or 'left'
flow: 'top', 

// called even when trigger remains the same.
alwaysCallback: undefined

Effecient Scrollspy Library, AnchorTrigger Plugin/Github

See Demo And Download

Official Website(babakness): Click Here

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

Related Posts


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…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…