Web Toolkit

image/svg+xml GitHub

Scrolltop 

<a href="#" title="torna all'inizio del contenuto" class="ScrollTop js-scrollTop js-scrollTo">
  <i class="ScrollTop-icon Icon-collapse" aria-hidden="true"></i>
  <span class="u-hiddenVisually">torna all'inizio del contenuto</span>
</a>
  • Content: 
    /** @define ScrollTop */

.ScrollTop {
  @extend .u-posFixed;
  @extend .u-background-95;
  @extend .u-color-white;
  @extend .u-borderRadius-circle;
  @extend .u-borderShadow-xs;
  @extend .u-textCenter;
  @extend .u-linkClean;
  @extend .u-zindex-max;
  @extend .u-text-r-xxs;

  border: 2px solid white;
  bottom: 1em;
  height: 3em;
  right: 1em;
  width: 3em;
}

.ScrollTop-icon {
  @extend .u-inlineBlock;
  @extend .u-posRelative;
  @extend .u-color-white;
  @extend .u-textCenter;
  @extend .u-text-l;
  @extend .u-textWeight-700;

  font-size: 2em;
  top: 15%;
}
  • URL: /components/raw/scrolltop/index.css
  • Filesystem Path: src/components/scrolltop/index.css
  • Size: 572 Bytes
  • Content: 
    import $ from 'jquery'
import debounce from 'throttle-debounce/throttle'

const threshold = 100

const _toggleScrolltop = () => {
  ($(window).scrollTop() > threshold) ?
  $('.js-scrollTop').show() :
  $('.js-scrollTop').hide()
}

$(window).scroll(debounce(500, _toggleScrolltop))
$(document).ready(_toggleScrolltop)

export default {
  threshold
}
  • URL: /components/raw/scrolltop/index.js
  • Filesystem Path: src/components/scrolltop/index.js
  • Size: 349 Bytes

There are no notes for this item.