Smooth anchor scrolling

jQuery script which checks the page URI for an anchor and scrolls to the target element smoothly.

Usage

• Add an id= attribute to the element to which you want to scroll, which must match the location hash in the browser. e.g. id="comments".
• Link to this element as usual: e.g. <a href="#comments">Scroll to comments</a>.
• Initialize the JavaScript.

Initialize the JavaScript

$('a[href*="#"]').anchorAnimate();

Adding an offset

e.g. if you have a fixed toolbar. Update the value of the JavaScript variable anchorAnimateOffset.

// General offset
var anchorAnimateOffset = 16;

// Extend anchorAnimateOffset variable with your fixed elements
var setAnchorOffset = function(){
	$('.nav.toolbar').each(function(){
		if ( $(this).outerHeight() && $(this).css("position") === "fixed"){
			anchorAnimateOffset += $(this).outerHeight();
		}
	});
	anchorAnimateOffset = Math.floor(anchorAnimateOffset) - 1;
};

// Initialize the functionality
$(document).on('ready.anchoranimate', function(){
	$('a[href*="#"]').anchorAnimate();
});

// Update anchorAnimateOffset value
$(window).on('load.anchoranimate resize.anchoranimate', setAnchorOffset);

Changelog

1.0.1 2018-11-09

• Change package scope
• Fix README dates

1.0.0 2018-11-09

• Initial version