Vebego Component Library

Back To Top 

<div class="back-to-top">
    <a href="">
        <span class="atm-icon  far fa-arrow-up   "></span>
    </a>
</div>
 
<div class="back-to-top">
    <a href="{{ url }}">
        {{ render '@icon' @root.back }}
    </a>
</div>
 
{
  "url": "",
  "back": {
    "style": "far",
    "icon": "fa-arrow-up"
  }
}
  • Content: 
    .back-to-top {
    @apply inline-block text-center fixed right-4 bottom-20 lg:bottom-16 cursor-pointer;

    transition: transform 200ms;
    z-index: 1000;

    a {
        @apply block justify-center w-12 h-12 pt-3 ml-2 border-2 border-solid border-black text-black bg-white;

        .icon {
            @apply text-h2;
            transition: all 0.3s ease;
        }

        &:hover {
            @apply no-underline;

            .icon {
                transform: translatey(-5px);
            }
        }
    }

    .paragraph {
        @apply text-sm lg:text-md;
    }
}
  • URL: /components/raw/back-to-top/back-to-top.css
  • Filesystem Path: src\components\03-molecules\back-to-top\back-to-top.css
  • Size: 608 Bytes
  • Content: 
    $(document).ready(function () {

    'use strict';

    // Back to top button
    var $backToTop = $('.back-to-top');

    if ($backToTop) {
        var scrollTrigger = 500,
            backToTop = function () {
                var scrollTop = $(window).scrollTop();

                if (scrollTop > scrollTrigger) {
                    $backToTop.fadeIn(200);
                } else {
                    $backToTop.fadeOut(200);
                }
            };

        backToTop();

        $(window).on('scroll', function () {
            backToTop();
        });

        $backToTop.on('click', function (e) {
            e.preventDefault();

            $('html, body').animate(
                {
                    scrollTop: 0,
                },
                700
            );
        });
    }
});
  • URL: /components/raw/back-to-top/back-to-top.js
  • Filesystem Path: src\components\03-molecules\back-to-top\back-to-top.js
  • Size: 849 Bytes

No notes defined.