ScrollTo
‹ Back
Use data-scroll-to
to scroll to an element on the page.
The value of the attribute can in the form of any basic CSS selector, like .my-element
, #my-element
or [data-my-element]
.
This is the element that you will scroll to.
<button class="button" data-scroll-to="#scroll-to-element-1">Scroll down to the top of my element</button> <div id="scroll-to-element-1"> This is the element that you will scroll to. </div>
And now here is a large box to fill this page out a little bit. I wonder what's at the bottom?
Nothing, there's nothing here.
<button class="button" data-scroll-to=".styleguide-page--main-content">Scroll back up?</button>