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

Samples

Initialization & Settings

$('.anchor-scroll').anchorScroll({
  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"
  data-on-scroll="blur-effect"></a>

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

License: MIT

Demo

http://www.virgiliudiaconu.com/work/anchor-scroll

GitHub

https://github.com/virgiliud/jquery.anchorScroll

Scroll to anchor in Angular JS

Anchoring using AngularJS – $anchorScroll and yOffset

Angular scrolling to anchor

https://github.com/Nolanus/ngx-page-scroll

See also

Smooth Scrolling

scrollClass

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

Enjoy!