All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

SmoothScroller namespace

Functions
Function name Description
.init([selector]) Has smooth scrolling applied to relevant elements upon page load.
.scroll(scrollTop, options) Moves the scrollbar to the target element. This is the function
Properties
Property name Description
.changeHash Change the URL hash (location.hash) when done scrolling? Defaults to true.
.margin The default top margin.
.speed The default scrolling speed. Higher is slower. Defaults to 10.

.init([selector]) method

Has smooth scrolling applied to relevant elements upon page load.
Listens to the click event on the document.
Anything which matches the selector will be considered a "link" by SmoothScroller and handled as such.

When a link is clicked, it is checked for several options:



  • data-margin="0" - A margin in pixels -- useful when you have a position:fixed top bar.

  • data-speed="10" - Inverse speed of the scrolling motion. Smaller is faster.

  • data-change-hash="true" - Change the URL hash (location.hash) when done scrolling.

Accepts

  • selector

    'a.scrollableLink,a.ink-smooth-scroll'Selector string for finding links with smooth scrolling enabled.

Demo

Scroll to "Part 1"

[lots and lots of content...]

...

Part 1

Code

<a href="#part1" class="ink-smooth-scroll" data-margin="40">Scroll to "Part 1"</a>

<p>[lots and lots of content...]</p>
<p>...</p>

<h1 id="part1">Part 1</h1>

<script>
   // You don't need to do this if you have autoload.js
   Ink.requireModules(['Ink.UI.SmoothScroller_1'], function (SmoothScroller) {
       SmoothScroller.init(/* defaults to a.ink-smooth-scroll, which selects our link above */);
   });
</script>

.scroll(scrollTop, options) method

Moves the scrollbar to the target element. This is the function
which animates the scroll position bit by bit. It calls itself in
the end through requestAnimationFrame

Accepts

  • scrollTop

    Y coordinate value to stop at
  • options

    Option hash containing:
  • options.margin

    Set this to non-zero to leave a margin between the top of the page and your element. Useful if you have a top bar with `position: fixed`.
  • options.speed

    Inverse scrolling speed. Smaller is faster.

SmoothScroller.changeHash = true

Boolean

Change the URL hash (location.hash) when done scrolling? Defaults to true.

SmoothScroller.margin = 0

Number

The default top margin.
Use this when you want the scroll motion to stop before it reaches its destination, for example when you want to add some breathing space or have a position:fixed top bar in front of your content.

SmoothScroller.speed = 10

Number

The default scrolling speed. Higher is slower. Defaults to 10.