Kayzen

Scroll-Top

assets/modules/objects/scroll-top

Files

  • _scroll-top.scss
  • scroll-top.js
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/scroll-top

Module Overview

  • Name: scroll-top
  • Modifiers: null
  • Components: null

Examples

<a class="button-icon-border scroll-top" href="#site-content">
    <i class="fa fa-angle-up"></i>
</a>

By default the icon is hidden until the user has scrolled a certain amount down the page. This value can be controlled when calling the plugin in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js).

$('.scroll-top').scrollToTop({
    activePosition : 350
});

Customizing

The Scroll-Top module can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
output-JSON true This allows the config to be accessed in the JavaScript.
position (auto, 2rem, 2rem, auto) The position on the screen for the scroll-top icon (top, right, bottom, left).
hide-below breakpoint('break-5') The width at which the icon should be hidden.

To change one of the above values, pass your new value(s) to the scroll-top() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include scroll-top((
    'position'   : (auto, auto, 1rem, 1rem),
    'hide-below' : 500px
));