Scroll-top knop zonder plugin en jQuery

Scroll-top knop zonder plugin en jQuery is onmisbaar voor responsive website die de bezoekers van enige gemakken wil voorzien. De scroll-top knop is een eenvoudige knop onderin de website dat wordt getoond zodra de bezoeker naar beneden scrolt. Door op deze knop te klikken gaat men helemaal naar de top van de website. Leuke simpele extra optie voor je website wat meerdere bezoekers zullen waarderen.

Hier zullen we de volgende onderwerpen bespreken:

Een scroll-top dat niet slecht is voor page speed en Web Vitals

Waarom zonder plugin en jQuery

Omdat tegenwoordig page speed en web vitals steeds belangrijker worden is het verstandig dit te doen zonder plugin jQuery. Plugins zijn vaak de oorzaak van een langzame WordPress website. WordPress plugins en page speed gaan niet goed samen. En een langzame website is niet prettig voor de bezoekers. De kans is groot dat mensen weg gaan zonder de website te bekijken.

JQuery is iets dat extra geladen moet worden om dit te kunnen gebruiken. Standaard gebruikt iedere browser JavaScript, of wel Vanilla JavaScript genoemd. Omdat dit wat lastiger is om mee te werken heeft men jQuery bedacht. Nu mag duidelijk zijn dat jQuery eigenlijk niet nodig is, maar veel plugins, thema’s en templates gebruiken het. Dit maakt het moeilijk hieraan te ontkomen.

Scroll-top knop zonder plugin en jQuery Freelance website ontwikkeling

Als jQuery nergens nodig is dan is het ook beter dit te voorkomen. Dit zijn de voordelen van deze code.

Hoe een scroll-top knop zonder plugin en jQuery maken

Nu is het tijd geworden om onze scroll-top knop te maken.
De volgende code kan geplaatst worden onder of bovenin in de pagina. Uiteraard is het beste deze zo laag mogelijk te plaatsen. Plaats deze code voor </body> maar boven je scripts als deze hier staan. Deze code kan ook direct na <body> geplaats worden. Deze code toont de knop als de bezoekers naar beneden scrolt.

Voor gebruikers van WordPress, plaats deze code in footer.php.


<div id="clw-scroll"><span></span></div>

De volgende code moet onderin de pagina geplaatst worden. Mooiste is direct na bovenstaande code. Zo staan ze netjes bij elkaar. Dit is het JavaScript dat zorgt dat de knop wordt getoond. Dit zorgt er ook voor dat de pagina naar boven scrolt als de bezoeker op de knop klikt.


<script type="text/javascript">
var scrollbutton = document.getElementById("clw-scroll");
window.addEventListener('scroll', scrollFunction);
function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        scrollbutton.style.display = "block"
    } else {
        scrollbutton.style.display = "none"
    }
}
var scrollbtn = document.getElementById('clw-scroll');
scrollbtn.onclick = GTscrollTop;
function GTscrollTop() {
    var duration = 500;
    if (document.scrollingElement.scrollTop === 0) {
        return
    }
    const totalScrollDistance = document.scrollingElement.scrollTop;
    let scrollY = totalScrollDistance,
        oldTimestamp = null;
    function step(newTimestamp) {
        if (oldTimestamp !== null) {
            scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration;
            if (scrollY <= 0) {
                return document.scrollingElement.scrollTop = 0
            }
            document.scrollingElement.scrollTop = scrollY
        }
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step)
    }
    window.requestAnimationFrame(step)
}
</script>

Het volgende is de CSS voor de scroll-top knop en deze kan je eigenlijk plaatsen waar je maar wilt. Het wordt heel sterk aangeraden deze CSS ook bij het script inline te plaatsen of in <head>
Uiteraard kan je de opmaak geheel naar wens aanpassen.


#clw-scroll {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0.8;
    display: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index: 99;
    background-color: #06aca9;
}
#clw-scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #f2f2f2;
}
#clw-scroll:hover {
    opacity: 1;
}

Dit is eigenlijk alles om een mooie scroll-top knop te tonen. Belangrijk is wel dat men deze code niet aanpast om er bijvoorbeeld Font Awesome te gebruiken om een andere icoon te gebruiken. Font Awesome is slecht voor page speed.

Meer informatie?

Neem contact op

Een scroll-top knop gebruiken of niet?

Als een goede website eigenaar probeert te zorgen dat bezoekers zich op hun gemak voelen op de website. De bezoekers moeten een goede bezoekerservaring hebben. Snelheid is een punt maar kleine dingetjes als een scroll-top knop zijn leuk en handig voor bezoekers.

Als de code op de juiste manier wordt gebruikt heeft het bijna geen invloed op page speed. Doe je dit met een plugin dan krijg je daar standaard jQuery bij en waarschijnlijk ook nog Font Awesome. Beide zullen de website alleen maar langzamer maken.

Ga de code ook niet aanpassen om Font Awesome te gebruiken. Dit is gewoon zonde van al het werk en tijd. Probeer eerder om Font Awesome te verwijderen.

Als je het goed doet heb je iets extra voor je bezoekers, maar doe je het niet goed dan kan het de website langzamer maken. Iedere website ontwikkelaar zou dit moeten kunnen implementeren maar hier is verder niet heel veel programmeer kennis voor nodig.

Er zijn nog geen reacties. Wees de eerste..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*