AFW Pattern Lab

Back To Top 

<button class="back-to-top" aria-label="Back To Top">
    <i class="fas fa-chevron-up" aria-hidden="true"></i>
</button>
 
<button class="back-to-top" aria-label="{{label}}">
    <i class="fas fa-chevron-up" aria-hidden="true"></i>
</button>
 
{
  "label": "Back To Top"
}
  • Content: 
    $(function() {
    const $backToTop = $('.back-to-top')

    $backToTop.on('click touch', () => {
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
    })

    $(window).on('load resize scroll', () => {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            $backToTop.fadeIn()
        } else {
            $backToTop.fadeOut()
        }
    })
})
  • URL: /components/raw/back-to-top/back-to-top.js
  • Filesystem Path: source/patterns/molecules/back-to-top/back-to-top.js
  • Size: 424 Bytes
  • Content: 
    .back-to-top {
    $this: &;

    background: #3074DC;
    border: none;
    border-radius: rem(4px);
    box-shadow: 0 10px 20px rgba($color-black, 0.2);
    color: $color-white;
    cursor: pointer;
    font-size: rem(18px);
    outline: none;
    padding: rem(15px);
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 999;

    &:hover,
    &:focus {
        background: $color-primary-red;
    }
}
  • URL: /components/raw/back-to-top/back-to-top.scss
  • Filesystem Path: source/patterns/molecules/back-to-top/back-to-top.scss
  • Size: 420 Bytes

No notes defined.