Scroll to top met css en javascript

Onlangs heb ik mijn bedrijfssite www.izee.nl in een nieuwe jas gestoken. Gewoon makkelijk, een one-page pagina. Omdat deze best “lang” is op de mobiel (en ook de desktop), heb ik een knopje gemaakt zodat je snel weer naar de top kan van de pagina.

Deze functie is makkelijk in html te plaatsen en ook makkelijk om aan te passen naar wens. Dus de kleur e.d..

Stap 2 – de CSS van de knop

Plaats de volgende CSS in de HEAD tag

<style type="text/css">
.scrollToTop{
    width:100px; 
    height:auto;
    padding:10px; 
    text-align:center; 
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    position:fixed;
    top:65%; /*de afstand vanaf de top van de browser*/
    right:2%; /*de afstand vanaf de rechterkant van de browser*/
    display:none;
    background-color: #006699;
    z-index:10; /*Deze heb ik zelf toegevoegd omdat ik wil dat deze altijd te zien is en niet ergens achter verdwijnt.*/
}
.scrollToTop:hover{
    background-color: #fff;
    color: #006699;
}
</style>

Stap 2 – Plaats deze code voor de </html> tag. Dus aan het einde van de pagina

<!-- code voor jqeury -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ga voor de laatste of de gewenste versie van jquery naar https://developers.google.com/speed/libraries/devguide#jquery -->
<a href="#" class="scrollToTop">Naar boven &uarr;</a>
<script type="text/javascript">
        $(document).ready(function(){
    
    $(window).scroll(function(){
        if ($(this).scrollTop() > 300) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});
</script>

 

Dat is het enige dat je hoeft te doen!

Tip:

Test dit ook op mobiele apparaten als bijvoorbeeld de IPAD, Tablet en de telefoons als Iphone en de Andriod toestellen.

Published by

Allan de Bruin

Allan de Bruin ontwikkelt al sinds 2007 websites onder de vlag van IZEE DEVELOPMENT. Door het geven van tips en trucs via het blog wil Allan de relaties van IZEE ondersteunen met de afgenomen website. Allan schrijft ook functionele ontwerpen, test websites en geeft advies via het blog van IZEE. Zie ook www.allandebruin.nl om zijn portfolio te lezen.