Scroll to

The scroll to component allows the user to use a link in content or in the theme to smooth scroll to the top or the bottom of the page. The theme also has a built in functionality for creating a back to top button that sits in the bottom right of the screen after the user scrolls down a certain distance.

Examples

Click to scroll to the bottom of the page

 

Code example

<span class="zen-scroll-bottom btn btn-secondary">Click to scroll to the bottom of the page</span>

A block of content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus sapien, porttitor ac sapien nec, rhoncus pulvinar augue. Maecenas ultricies lorem nisi, quis commodo erat ullamcorper quis. Nunc nec mi rhoncus, malesuada odio nec, rutrum tellus. Vivamus rutrum ut ex sed varius. Cras scelerisque, erat sed vulputate pharetra, libero neque facilisis odio, sed pulvinar augue lorem consectetur elit. Fusce pretium ullamcorper tristique. Curabitur pulvinar a magna sed pretium. Duis tincidunt tristique leo, id eleifend nunc tincidunt sit amet. Phasellus rutrum massa a nulla gravida, a consectetur purus tempus. Sed gravida libero lorem, vel placerat nisi pellentesque ac. Etiam non neque porta, fermentum nulla ut, molestie lectus.

Etiam scelerisque in urna vel sagittis. Vivamus lobortis sodales risus, eget mollis odio tincidunt dapibus. Duis pharetra vestibulum nisi sit amet rutrum. Donec non volutpat neque. Nullam vitae lorem venenatis, consectetur purus non, cursus nisl. Aliquam suscipit dolor vel odio vulputate, vitae bibendum arcu feugiat. Aliquam euismod egestas magna, non varius lectus egestas efficitur. Maecenas tempor eu arcu et aliquam.

Nunc sed dolor diam. Quisque rhoncus feugiat mauris. Quisque a ex at turpis malesuada ultrices sed ac enim. Vivamus laoreet viverra nunc sit amet ornare. Cras fermentum varius nisi in pellentesque. Praesent fermentum et orci ut ultricies. Curabitur accumsan tortor a lorem vehicula fermentum. Donec a gravida lacus. Etiam dignissim lorem vitae nulla tempor porta. Curabitur laoreet, enim non ornare aliquam, ex libero rhoncus tortor, non lobortis odio nunc non tellus. Aliquam ligula nisl, imperdiet sit amet enim sed, mattis placerat est. Vestibulum nec enim et leo mollis suscipit eu vel ipsum. Suspendisse finibus pulvinar ligula, pulvinar fringilla risus mollis dapibus. Donec tempus arcu eu lobortis ornare.

In pellentesque maximus erat, a bibendum leo tempor sed. Duis vitae commodo dolor. Maecenas pretium turpis elit, eu pulvinar arcu bibendum vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a nisi dolor. Praesent sem nibh, mollis in lorem sit amet, iaculis rutrum elit. Ut vulputate porttitor quam, vitae semper tellus fringilla in. Donec eu nunc tortor. Phasellus tristique urna odio, in vulputate ipsum consequat at.

Scroll to top

Scroll-fade

The scroll-fade class will only display the back to top button after the user has scrolled 200px from the top of the page.

A block of content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec metus sapien, porttitor ac sapien nec, rhoncus pulvinar augue. Maecenas ultricies lorem nisi, quis commodo erat ullamcorper quis. Nunc nec mi rhoncus, malesuada odio nec, rutrum tellus. Vivamus rutrum ut ex sed varius. Cras scelerisque, erat sed vulputate pharetra, libero neque facilisis odio, sed pulvinar augue lorem consectetur elit. Fusce pretium ullamcorper tristique. Curabitur pulvinar a magna sed pretium. Duis tincidunt tristique leo, id eleifend nunc tincidunt sit amet. Phasellus rutrum massa a nulla gravida, a consectetur purus tempus. Sed gravida libero lorem, vel placerat nisi pellentesque ac. Etiam non neque porta, fermentum nulla ut, molestie lectus.

Etiam scelerisque in urna vel sagittis. Vivamus lobortis sodales risus, eget mollis odio tincidunt dapibus. Duis pharetra vestibulum nisi sit amet rutrum. Donec non volutpat neque. Nullam vitae lorem venenatis, consectetur purus non, cursus nisl. Aliquam suscipit dolor vel odio vulputate, vitae bibendum arcu feugiat. Aliquam euismod egestas magna, non varius lectus egestas efficitur. Maecenas tempor eu arcu et aliquam.

Nunc sed dolor diam. Quisque rhoncus feugiat mauris. Quisque a ex at turpis malesuada ultrices sed ac enim. Vivamus laoreet viverra nunc sit amet ornare. Cras fermentum varius nisi in pellentesque. Praesent fermentum et orci ut ultricies. Curabitur accumsan tortor a lorem vehicula fermentum. Donec a gravida lacus. Etiam dignissim lorem vitae nulla tempor porta. Curabitur laoreet, enim non ornare aliquam, ex libero rhoncus tortor, non lobortis odio nunc non tellus. Aliquam ligula nisl, imperdiet sit amet enim sed, mattis placerat est. Vestibulum nec enim et leo mollis suscipit eu vel ipsum. Suspendisse finibus pulvinar ligula, pulvinar fringilla risus mollis dapibus. Donec tempus arcu eu lobortis ornare.

In pellentesque maximus erat, a bibendum leo tempor sed. Duis vitae commodo dolor. Maecenas pretium turpis elit, eu pulvinar arcu bibendum vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a nisi dolor. Praesent sem nibh, mollis in lorem sit amet, iaculis rutrum elit. Ut vulputate porttitor quam, vitae semper tellus fringilla in. Donec eu nunc tortor. Phasellus tristique urna odio, in vulputate ipsum consequat at.

Scroll to top

Code example

<span class="zen-scroll-top btn btn-secondary zen-scroll-fade">Scroll to top</span>

Scroll Fixed

Using the scroll fixed class makes the scroll button sit to the bottom right of the page. The button in the bottom right of this page uses this class and can be enabled via the theme settings.

Code example

<span class="zen-scroll-top btn btn-primary zen-scroll-fade zen-fixed"><span class="zen-icon zen-icon-arrow-up"></span></span>
Scroll to top