Scrollto
Scroll

Scrollto is a plugin that manages interaction scroll with hash links or any node.

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.

SyntaxDefault / ArgumentsDescription
Optionscrollto:Boolean|Query|StringfalseOn activation trigger scrollto to self.container or to a query or to type can be elements, targets, elementsInner, targetsInner
OptionscrolltoInit:BooleanfalseScrollto also on initialization (data-xt-hash or .on or options.min etc..)

Use a[role="button"] instead of a[href]. Use queue: 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.

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
Optionanchors:Array[href*="{hash}"]:not([href$="#"])Query for hash links where {hash} is the hash part of the link
Optionscrollers:Query'.xt-overlay:not([data-xt-overlay-disabled])'Query for scroll nodes besides document (ordered parent > child)
Optionclass:String'on'Activation class for anchors
Optionevents:String|false'scroll off.xt.overlay'Events of self.scrollers that triggers activation
OptionscrollActivation:BooleantrueActivate anchors automatically on scroll
OptionscrollDelay:Number200Delay on scroll checks
Optionhash:BooleanfalseUpdate url with hash on anchors, if false you can use [data-xt-scrollto-hash="true"] or [data-xt-scrollto-hash="false"] on each link
Optionposition({ self }):Function<Function>Positioning function that sets self.position, return Number
Optionspace({ self }):Function<Function>Positioning space window top that sets self.space, return Number
Optionduration({ 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.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd 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.

SyntaxDefault / ArgumentsDescription
Optionobserver:Boolean|nullnullForce enable or disable intersection observer

Listen

Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventscrollto.xt.scrolltocontainerScrollto event
Eventsetup.xt.scrolltocontainerSetup event
Eventinit.xt.scrolltocontainerInit or reinit event
Eventstatus.xt.scrolltocontainerStatus event (enabled or disabled)
Eventdestroy.xt.scrolltocontainerDestroy event

Trigger

Trigger events on DOM node.

SyntaxDOM ElementDescription
Eventscrollto.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 to true or false just before triggering scrollto.trigger.xt.scrollto or changing location.hash.

SyntaxDescription
Propertyself.componentName:StringComponent name (used in Xt.get)
Propertyself.options:ObjectFinal options
Propertyself.initial:BooleanIf initial or reset activation
Propertyself.disabled:BooleanIf component disabled
Propertyself.container:NodeContainer node
Propertyself.hashchange:BooleanIf browser hash change activation
Propertyself.target:NodeCurrent scroll target
Propertyself.scrollers:NodeAll scrolling element
Propertyself.scroller:NodeCurrent scrolling element
Propertyself.position:NumberCurrent scroll position
Propertyself.space:NumberCurrent scroll space
Propertyself.duration:NumberCurrent scroll duration

Methods

Call methods by getting self object.

SyntaxDescription
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component