Maak uw links op dezelfde pagina iets leuker om te gebruiken met dit native smooth-scrolling-effect.

Soepel scrollen is een techniek die wordt gebruikt bij webontwikkeling om een ​​vloeiende scrollervaring voor gebruikers te creëren. Het verbetert de navigatie binnen een webpagina door de scrollbeweging te animeren in plaats van de standaard abrupte sprong.

Deze uitgebreide gids voor webontwikkelaars helpt u soepel scrollen te implementeren met behulp van JavaScript.

Vloeiend scrollen is wanneer een webpagina soepel naar de gewenste sectie scrolt, in plaats van daar meteen naartoe te springen. Dit maakt de scrollervaring aangenamer en naadloos voor de gebruiker.

Soepel scrollen kan de gebruikerservaring van een webpagina op verschillende manieren verbeteren:

  • Het verbetert de visuele aantrekkingskracht door abrupte en schokkende scroll-sprongen te elimineren en een vleugje elegantie toe te voegen.
  • Het stimuleert gebruikersbetrokkenheid door een vloeiende en naadloze scrolervaring te bieden. Dit motiveert op zijn beurt gebruikers om de inhoud verder te verkennen.
    • instagram viewer
  • Ten slotte maakt vloeiend scrollen het navigeren voor gebruikers gemakkelijker, vooral wanneer het gaat om lange webpagina's of het schakelen tussen verschillende secties.

Om soepel scrollen te implementeren, kunt u het standaard scrolgedrag wijzigen met behulp van JavaScript.

HTML-structuur

Maak eerst de benodigde markup-elementen voor de verschillende viewports en de navigatie om ertussen te scrollen.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

Deze HTML bestaat uit een navigatiebalk met daarin drie ankertags. Het href-attribuut van elk anker specificeert de unieke identificatie van de doelsectie (bijv. sectie1, sectie2, sectie3). Dit zorgt ervoor dat elke link waarop u klikt, naar het overeenkomstige doelelement navigeert.

CSS-styling

Pas vervolgens wat CSS toe om de pagina zichtbaar aantrekkelijk en georganiseerd te maken. Voeg het volgende toe aan stijl.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Hierdoor worden de links weergegeven als een rij knoppen en elke sectie als een element op volledige hoogte. Maar merk op hoe het klikken op een link ervoor zorgt dat de browser onmiddellijk naar het overeenkomstige gedeelte springt, zonder animatie.

JavaScript-implementatie

Gebruik anders de methode scrollIntoView() om een ​​vloeiende animatie toe te voegen wanneer u op een ankertag klikt. De methode scrollIntoView() is een ingebouwde JavaScript-methode van de klasse Element waarmee u een element naar het zichtbare gebied van het browservenster kunt schuiven.

Wanneer u deze methode aanroept, past de browser de schuifpositie van de container van het element (zoals het venster of een schuifbare container) aan om het element zichtbaar te maken.

Voeg uw JavaScript-code toe aan het script.js bestand. Begin met te luisteren of de DOMContentLoaded-gebeurtenis wordt geactiveerd voordat u iets anders doet. Dit zorgt ervoor dat de callback alleen wordt uitgevoerd wanneer de DOM volledig is geladen en is klaar om te manipuleren.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Definieer vervolgens de makeLinksSmooth() functie. Begin met het selecteren van de ankertags in de navigatie, aangezien u hun gedrag wilt wijzigen. Herhaal vervolgens elke link en voeg een gebeurtenislistener toe voor de klikgebeurtenis.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Definieer ten slotte de smoothScroll() functie waaraan een gebeurtenislistenerobject moet worden doorgegeven. Roep preventDefault() aan om ervoor te zorgen dat de browser zijn standaardactie niet uitvoert wanneer u op de koppeling klikt. De volgende code zal deze vervangen.

Pak de href-waarde van de huidige ankertag en sla deze op in een variabele. Die waarde moet de ID zijn van de doelsectie, met het voorvoegsel "#", dus gebruik deze om het element van de sectie te selecteren via vraagSelector(). Als het targetertElement aanwezig is, voert u its scrollIntoView methode en geef het "gladde" gedrag door in een objectparameter om het effect te voltooien.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Daarmee scrolt uw voltooide webpagina soepel naar elke sectie wanneer u op een link klikt:

Om het soepel scrollen verder te verbeteren, kunt u bepaalde aspecten verfijnen.

U kunt de verticale positie van de scroll aanpassen met behulp van de blok eigenschap van het instellingenargument. Gebruik waarden zoals "start", "center" of "end" om het deel van het doelelement te identificeren waarnaar moet worden gescrolld:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Versoepelingseffecten toevoegen

Pas versoepelingseffecten toe op de schuifanimatie om een ​​natuurlijkere en visueel aantrekkelijkere overgang te creëren. Easing-functies zoals in-, uit- of op maat kubieke-Bezier-curven kan de versnelling en vertraging van de scrollbeweging regelen. U kunt een aangepaste timingfunctie gebruiken met de CSS-eigenschap scroll-behavior of een JavaScript-bibliotheek zoals "smooth-scroll" om hetzelfde resultaat te bereiken.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Zorg ervoor dat uw soepele scroll-implementatie consistent werkt in verschillende browsers. Test en handel eventuele browserspecifieke eigenaardigheden of inconsistenties af.

U kunt een website gebruiken zoals Kan ik gebruiken om browserondersteuning te testen tijdens het bouwen. Overweeg het gebruik van een JavaScript-bibliotheek of polyfill om compatibiliteit tussen browsers te garanderen en alle gebruikers een naadloze ervaring te bieden.

Soepel scrollen voegt een vleugje elegantie toe en verbetert de gebruikerservaring door een vloeiend en visueel aantrekkelijk scroll-effect te creëren. Door de stappen in deze handleiding te volgen, kunnen webontwikkelaars vloeiend scrollen implementeren met behulp van JavaScript.

Het scrolgedrag nauwkeurig afstemmen, versoepelingseffecten toevoegen en zorgen voor compatibiliteit tussen verschillende browsers de soepele scrolervaring verder verbeteren, waardoor uw webpagina's aantrekkelijker en aangenamer worden navigeren.