ScrollTo

Enhance your site with a nice effect that slows down the scrolling when jumping to another part of your page.


Usage

To gradually descrease the speed when you jump from one section of your page to another, for example with a to-top scroller, just add the data-scrollto attribute to an <a> element, that links to the ID of the section you want to target.

Usage

  • Data Attributes

    Attribute Description
    [data-scrollto] This is the identifier for the JavaScript to initialize the component.
  • Scroll To Top Scroll Down 150px
  • <a href="#target" class="button" data-scrollto>...</a>
    <a href="#" class="button" data-scrollto="{offset:150}">...</a>

JavaScript options

This is an example of how to set options via attribute:

data-scrollto="{target:'#my-id'}"

Options

Option Possible value Default Description
duration integer 1000 Duration of the scroll animation, in milliseconds
transition string 'easeOutExpo' Animation timing function of the scroll
offset integer 0 Offset to scroll to from the current position in the window

Events

Name Parameter Description
willscroll.clique.scrollTo event Fired before the <html> and <body> starts scrolling
didscroll.clique.scrollTo event Fired after the <html> and <body> scrolling has completed

Offset

The offset-option adds a specified distance to the target when calculating the scroll position. The offset is passed via the data-attribute. The value can be positive to stop scrolling before the target or negative to stop scrolling after the target.

Usage

  • Go Up! Go Down!
  • <a href="#" class="button" data-scrollto="{offset:-150}">...</a>
    <a href="#" class="button" data-scrollto="{offset:150}">...</a>