Scroll To

Automatic smooth scroll to page anchors

Installation

Scroll To requires the following dependencies:

Overview

Automatic smooth scroll to page anchors. This script automatically scrolls to elements ids when user click on links anchors.

    <a href="#myElement">Link</a>
    <button class="my-btn mod-xs u-ml-md" my-scroll-to="#myElement">Any HTML tag</button>
    <h1 id="myElement">Hello world!</h1>
    <style>
        /* DEMO ONLY */
        #myElement { margin-top:100vh;margin-bottom:100vh; }
    </style>

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 
// Current settings
myScrollTo {
    defaults: {
        duration: 300,
        offsets: ['nav-primary', 'nav-secondary'],
        ignore: ['[my-toggle]', '[my-tab]']
    }
}
// Example
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
    }
}

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.
    <header>
        <nav id="navbar">
            <a href="#myElement" data-offsets="navbar,title">specified ids offset</a> | 
            <a href="#myElement" data-offsets="100">100 pixels offset</a> | 
            <a href="#">Go to top</a>
        </nav>
        <h1 id="title">This is a scrollTo demo</h1>
    </header>
    <h2 id="myElement">Hello world!</h2>
    <p>Scroll with ids offsets takes elements heights #navbar and #title into account.</p>
    <p>If data-offsets contains a number, it is used as custom offset amount.</p>
    <style>
        /* 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;}
    </style>

Duration

Overrides scroll duration. Just add data-duration custom attribute with the value in milliseconds.

    <nav id="navbar">
        <a href="#myElement" data-duration="1000">One second please</a> | 
        <a href="#myElement" data-duration="0">Instant scroll</a>
    </nav>
    <h1 id="myElement">Hello world!</h1>
    <p><a href="#navbar" data-duration="2000">Go slowly to top</a></p>
    <style>
        /* DEMO ONLY */
        nav { padding:10px;}
        #myElement { margin-top:100vh; margin-bottom:20px;}
        p:last-child { margin-bottom:100vh;}
    </style>