jQuery scroll to anchor – jquery.anchorScroll plugin

A lightweight jQuery scroll to anchor plugin, for smooth scrolling to anchor targets, and adding classes to elements.

jQuery scroll to anchor solution

The “jquery.anchorScroll plugin” is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets and adding classes/callbacks to elements on scroll events. Implement what you need in a minute.

jQuery scroll to anchor plugin
jQuery scroll to anchor plugin


Initialization & Settings

  scrollSpeed: 800, // scroll speed
  offsetTop: 0, // offset for fixed top bars (defaults to 0)
  onScroll: function () { 
    // callback on scroll start...
  scrollEnd: function () {
    // callback on scroll end

Data Attributes Settings

Add data attributes to your anchor link:

– data-class-to: Element to which a class is added on scroll events (enter this as the value to target the anchor link itself)

– data-on-scroll: Class added to the selected element while scrolling

– data-scroll-end: Class added to the selected element after scroll ends

Sample HTML tags

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

<!-- Add class "bounce" to anchor target (#div-2) at end of scroll --> 
<a href="#div-2" class="anchor-scroll" data-class-to="#div-2"

License: MIT





Scroll to anchor in Angular JS

Anchoring using AngularJS – $anchorScroll and yOffset

Angular scrolling to anchor



See also

Smooth Scrolling


CSS3 and jQuery single page scrolling plugin – singular.js

jQuery scroll to navigation menu plugin – jumpTo

The scrollUp 2.0 – jQuery scroll to top plugin