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.0 2018-08-06
- Initial version