Contao – Scroll To Top

Um in Contao einen Scroll to top Button am Seitenende einzufügen, wird ein HTML Modul benötigt, welches folgenden Inhalt erhält:

<a href="javascript:" id="return-to-top"></a>

Dieses Modul wird am Ende der Seite in den Footer gesetzt.

Folgender JavaScript Code muss im Layout unter Eigener JavaScript-Code hinterlegt werden.

$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        
        $('#return-to-top').fadeIn(200);    
    } else {
        $('#return-to-top').fadeOut(200);   
    }
});
$('#return-to-top').click(function() {      
    $('body,html').animate({
        scrollTop : 0                       
    }, 500);
});

Um den Scroll to top Button zu gestalten kann nachstender CSS Code genutzt werden.

#return-to-top i {
    color: #fff;
        margin: 0;
        position: relative;
        left: 16px;
        top: 13px;
        font-size: 19px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}

#return-to-top {
    background-color:#bd0a12;
    position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        display: block;
        text-decoration: none;
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
        display: none;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
Share: