[6] Shoptet úpravy - Tlačítko nahoru

Následující css vložte do hlavičky vašeho eshopu (popřípadě externího css souboru)

#backToTop {
    display: none;
}

@media (max-width: 991px) {
    #backToTop {
        position: fixed;
        opacity: 1;
        pointer-events: auto;
        bottom: 15px;
        right: 15px;
        background: gray;
        color: white;
        font-size: 11px;
        height: 46px;
        width: 46px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;
        transition: 0.3s ease opacity;
    }
    #backToTop span {
        border: solid white;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(-135deg);
        margin-top: 4px;
    }
}

Následující js vložte do patičky vašeho eshopu (popřípadě externího js souboru)

    $(document).ready(function() {
        let windowHeight = $(window).height();
        let docHeight = $(document).height();
        let multiplier = 4;

        if((windowHeight * multiplier) < docHeight){
            $("body").append("<div id='backToTop' aria-label='Scrollovat nahoru'><span></span></div>");

            document.querySelector('#backToTop').addEventListener('click', e => {
                window.scrollTo({top: 0, behavior: 'smooth'});
            },{
                passive: true
            });
        }
    });
← Zpět na výpis článků