1.3.0 • Published 6 years ago
@cubetech/js-hashscroll v1.3.0
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();
Scrolling manually
$('#comments').scrollToMe();
Adding an offset
e.g. if you have a fixed toolbar. Update the value of the JavaScript variable window.anchorAnimateOffset
.
// General offset
window.anchorAnimateOffset = 16;
// Extend window.anchorAnimateOffset variable with your fixed elements
var setAnchorOffset = function(){
$('.nav.toolbar').each(function(){
if ( $(this).outerHeight() && $(this).css("position") === "fixed"){
window.anchorAnimateOffset += $(this).outerHeight();
}
});
window.anchorAnimateOffset = Math.floor(window.anchorAnimateOffset) - 1;
};
// Initialize the functionality
$(document).on('ready.anchoranimate', function(){
$('a[href*="#"]').anchorAnimate();
});
// Update window.anchorAnimateOffset value
$(window).on('load.anchoranimate resize.anchoranimate', setAnchorOffset);
Following events are triggered
$(window).trigger('ct-hashscroll/scroll-start', window.anchorAnimateOffset, destinationTop);
Example of responding to a custom event
$(window).on('ct-hashscroll/scroll-start', function(event, anchorAnimateOffset, destinationTop){
window.console.log([anchorAnimateOffset, destinationTop]);
});
Changelog
1.3.0 2018-08-06
- Move to new @cubetech scope.
1.2.1 2018-08-06
- Update README
1.2.0 2018-08-06
- Apply
anchorAnimateOffset
variable to the globalwindow
object.
1.1.0 2018-08-06
- Add custom event for use in debugging.
1.0.2 2018-08-06
- Add example of how to scroll to an element manually.
1.0.1 2018-08-06
- Fix package description
1.0.0 2018-08-06
- Initial version
1.3.0
6 years ago