https://github.com/sayhellogmbh/js-hashscroll
jQuery function to provide smooth scrolling to an element which matches a URL hash.
https://github.com/sayhellogmbh/js-hashscroll
Last synced: 3 months ago
JSON representation
jQuery function to provide smooth scrolling to an element which matches a URL hash.
- Host: GitHub
- URL: https://github.com/sayhellogmbh/js-hashscroll
- Owner: SayHelloGmbH
- Created: 2019-01-18T11:15:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-18T11:26:32.000Z (over 7 years ago)
- Last Synced: 2025-03-18T05:55:45.333Z (over 1 year ago)
- Language: JavaScript
- Size: 1.95 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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. `Scroll to comments`.
* Initialize the JavaScript.
### Initialize the JavaScript
```javascript
$('a[href*="#"]').anchorAnimate();
```
### Scrolling manually
```javascript
$('#comments').scrollToMe();
```
### Adding an offset
e.g. if you have a fixed toolbar. Update the value of the JavaScript variable `window.anchorAnimateOffset`.
```javascript
// 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
```javascript
$(window).trigger('ct-hashscroll/scroll-start', window.anchorAnimateOffset, destinationTop);
```
### Example of responding to a custom event
```javascript
$(window).on('ct-hashscroll/scroll-start', function(event, anchorAnimateOffset, destinationTop){
window.console.log([anchorAnimateOffset, destinationTop]);
});
```
## Changelog
### 1.0.0 2019-01-18
* Initial @sayhellogmbh version.