Scroll To
- Requires
jQuery - Requires
my-scroll-to.js
Basics
Automatic smooth scroll to page anchors. This script automatically scrolls to elements ids when user click on links anchors.
Settings
my-scroll-to.js contains myScrollTo.defaults object with all default settings:
| Global parameter | Data attribute | Type | Description |
|---|---|---|---|
duration |
data-duration |
number | Scroll duration in ms |
offsets |
data-offsets |
array or integer | Allows to adjust the final position after scroll. Removes heights of the specified elements ids from scroll amount. If integer, use it as default offset amount |
ignore |
- | array | Selectors to ignore: Elements with specified selectors are ignored. This avoids applying “ScrollTo” on unwanted elements |
// Example of myScrollTo.defaults
duration: 300, // Scroll duration
offsets: ['first-id', 'second-id'], // Remove these heights from scroll amount
ignore: ['[my-toggle]', '.my-tab', '#any-id'] // Selectors to ignore: Elements with specified selectors are ignored
// Current settings
duration: 300,
offsets: ['nav-primary', 'nav-secondary'],
ignore: ['[my-toggle]', '[my-tab]']
Offsets
This feature allows to override final scroll position in relation with specific elements. Just add data-offsets custom attribute containing:
- Comma separated list of elements ids.
- A single value in pixels.
This is a scrollTo demo
Hello world!
Scroll with ids offsets takes elements heights #navbar and #title into account.
If data-offsets contains a number, it is used as custom offset amount.
/* DEMO ONLY */
header { position:fixed; top:0; left:0; width:100%; background-color:#f9f9f9;}
nav { padding:10px;}
h1 { margin:0; font-size:12px; padding:10px; background-color:#eee;}
h2 { font-size:100px; margin:0; }
#myElement { margin-top:100vh;}
p:last-child { margin-bottom:50vh;}
Duration
Overrides scroll duration. Just add data-duration custom attribute with the value in milliseconds.
Hello world!
/* DEMO ONLY */
nav { padding:10px;}
#myElement { margin-top:100vh; margin-bottom:20px;}
p:last-child { margin-bottom:100vh;}