Smooth scroll

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-f-smooth-scroll attribute to an <a> element, that links to the ID of the section you want to target.

Example

In our example we are using the heading Smooth scroll as target.

Go Up! Go Down!

Markup

<a href="#my-id" class="f-btn" data-f-smooth-scroll>...</a>

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.

Data attribute Description
data-f-smooth-scroll="{offset: 90}" Adds an offset, that stops scrolling 90px before the target.
data-f-smooth-scroll="{offset: -90}" Adds an offset, that stops scrolling 90px after the target.

Example

This link scrolls the site to the headline "Smooth scroll" with an offset of 90px.

This link scrolls the site to the bottom "Smooth scroll" with an offset of -90px.

This button is not an anchor. Specify a selector in an element option. This will scroll the site to the headline "Smooth scroll" without an offset.

Markup

<a href="#my-id" data-f-smooth-scroll="{offset: 90}">...</a>
<a href="#my-id" data-f-smooth-scroll="{offset: -90}">...</a>
<span data-f-smooth-scroll="{element:'#my-id',offset:0}">...</span>

JavaScript options

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

data-f-smooth-scroll="{offset:90, duration:2000, transition:'easeOutExpo'}"
Option Possible value Default Description
offset integer 0 Pixel offset of the trigger element
duration integer 1000 Millisecond transition period
transition easeIn, easeOut, linear, easeOutExpo, easeInExpo easeOutExpo The transition to use on the scroll
element string (selector) '' If not an anchor specify the element to scroll to

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This link scrolls the site to the headline "Smooth scroll" with an offset of 90px.