Scroll To

scroll-to.js

Use the scroll-to module to smoothly scroll to elements on the page.

To make sure that any sticky elements like site headers don't cover up your scroll target, tag them with the class js-is-fixed-top.

One day, we may be able to achieve this with pure CSS. But we're still waiting on better browser support, so for now we must use JavaScript.

Examples

Basic

Welcome to #section-1

<button class="button js-scroll-to" data-scroll-to-target="#section-1">Scroll to Section 1</button>

<section id="section-1" class="demo-section">
  <p>Welcome to #section-1</p>
</section>

Custom Scroll Speed

Welcome to #section-2. It should have taken you a little longer to get here.

<button class="button js-scroll-to" data-scroll-to-target="#section-2" data-scroll-to-speed="1000">Scroll to Section 2</button>

<section id="section-2" class="demo-section">
  <p>Welcome to #section-2. It should have taken you a little longer to get here.</p>
</section>

Custom Offset

Welcome to #section-3. You should notice a 30px offset above me.

<button class="button js-scroll-to" data-scroll-to-target="#section-3" data-scroll-to-offset="30">Scroll to Section 3</button>

<section id="section-3" class="demo-section">
  <p>Welcome to #section-3. You should notice a 30px offset above me.</p>
</section>