Javascript
Import the javascript file with import 'xtendui/src/scrollto'
.
Initialize manually within javascript with new Xt.Scrollto(document.querySelector('.my-container'), {/* options */})
.
Usage
Use Tailwind CSS variants on:
, group-on:
to assign animations to anchors elements.
You can also scroll to a Node also if not anchored using the event scrollto.trigger.xt.scrollto
.
This demo uses scroll sticky see documentation for more info.
Do not assign other components to
anchors
or the components activations conflict.
Try the demo on a new page to preview location hash changes.
You can also set scroll position without gsap.
It works also inside overlay and it automatically open overlay and all parent components with openauto: true
.
Try the demo on a new page to preview location hash changes.
Toggle Integration
You can use the Scrollto component in conjunction with any toggle component (toggle, drop, overlay, slider, tooltip). It also integrates with the toggle hash interaction.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | scrollto:Boolean|Query|String | false | On activation trigger scrollto to self.container or to a query or to type can be elements , targets , elementsInner , targetsInner |
Option | scrolltoInit:Boolean | false | Scrollto also on initialization (data-xt-hash or .on or options.min etc..) |
Use
a[role="button"]
instead ofa[href]
. Usequeue: false
for proper browser back button.
Try the demo on a new page to preview location hash changes.
Options
Here are the main javascript options.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | debug:Boolean | false | Debug on console |
Option | anchors:Array | [href*="{hash}"]:not([href$="#"]) | Query for hash links where {hash} is the hash part of the link |
Option | scrollers:Query | '.xt-overlay:not([data-xt-overlay-disabled])' | Query for scroll nodes besides document (ordered parent > child) |
Option | class:String | 'on' | Activation class for anchors |
Option | events:String|false | 'scroll off.xt.overlay' | Events of self.scrollers that triggers activation |
Option | scrollActivation:Boolean | true | Activate anchors automatically on scroll |
Option | scrollDelay:Number | 200 | Delay on scroll checks |
Option | hash:Boolean | false | Update url with hash on anchors, if false you can use [data-xt-scrollto-hash="true"] or [data-xt-scrollto-hash="false"] on each link |
Option | position({ self }):Function | <Function> | Positioning function that sets self.position , return Number |
Option | space({ self }):Function | <Function> | Positioning space window top that sets self.space , return Number |
Option | duration({ self }):Function | <Function> | Scroll duration depending on self.scroll.scrollTop and self.position that sets self.duration , return Number |
Default functions as follow.
position: ({ self }) => {
const rect = self.target.getBoundingClientRect()
let position = rect.top + self.scroller.scrollTop
if (self.scroller !== document.scrollingElement) {
const rectScrollElement = self.scroller.getBoundingClientRect()
position = position - rectScrollElement.top
}
return position
},
space: () => {
return window.innerHeight / 6
},
duration: () => {
const overlay = self.target.closest('.xt-overlay')
// instant scroll on initial or hashchange or inside overlay and not already activated
if (self.initial || self.hashchange || (overlay && !overlay.classList.contains('in'))) return 0
return 1
},
Match Media
You can add additional options that gets added on match media query. You can use different queries with different and nested options.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | matches:Object | false | Add additional options on match media query |
Util
You can get self object on Xtend UI components with the constructor or Xt.get.
new Xt.Scrollto(document.querySelector('.my-container'), {}).then(self => {})
// or
Xt.get({ name: 'xt-scrollto', el: document.querySelector('.my-container') }).then(self => {})
You can set default options for all components of the same type, with Xt.options.
Xt.options['xt-scrollto'] = {
debug: true,
}
By default components are loaded and initialized only when inside viewport or instantly if self.container
is not visible (display: none
).
You can force global observer options or singular component observer options passing this option.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | observer:Boolean|null | null | Force enable or disable intersection observer |
Listen
Listen to events, for listeners use this guideline.
Syntax | DOM Element | Description | |
---|---|---|---|
Event | scrollto.xt.scrollto | container | Scrollto event |
Event | setup.xt.scrollto | container | Setup event |
Event | init.xt.scrollto | container | Init or reinit event |
Event | status.xt.scrollto | container | Status event (enabled or disabled) |
Event | destroy.xt.scrollto | container | Destroy event |
Trigger
Trigger events on DOM node.
Syntax | DOM Element | Description | |
---|---|---|---|
Event | scrollto.trigger.xt.scrollto | <any DOM node> | Scroll to a Node also if not anchored |
Properties
Access properties by getting self object.
If you want to force the self.hashchange value manually for instant duration set
Xt.scrolltoHashforce
totrue
orfalse
just before triggeringscrollto.trigger.xt.scrollto
or changinglocation.hash
.
Syntax | Description | |
---|---|---|
Property | self.componentName:String | Component name (used in Xt.get ) |
Property | self.options:Object | Final options |
Property | self.initial:Boolean | If initial or reset activation |
Property | self.disabled:Boolean | If component disabled |
Property | self.container:Node | Container node |
Property | self.hashchange:Boolean | If browser hash change activation |
Property | self.target:Node | Current scroll target |
Property | self.scrollers:Node | All scrolling element |
Property | self.scroller:Node | Current scrolling element |
Property | self.position:Number | Current scroll position |
Property | self.space:Number | Current scroll space |
Property | self.duration:Number | Current scroll duration |
Methods
Call methods by getting self object.
Syntax | Description | |
---|---|---|
Method | self.reinit() | Reinit component |
Method | self.disable() | Disable component |
Method | self.enable() | Enable component |
Method | self.destroy() | Destroy component |