Gör dina länkar på samma sida något trevligare att använda med denna inbyggda mjukrullningseffekt.

Smidig rullning är en teknik som används i webbutveckling för att skapa en flytande rullningsupplevelse för användare. Det förbättrar navigeringen på en webbsida genom att animera rullningsrörelsen istället för det abrupta standardhoppet.

Den här omfattande guiden för webbutvecklare hjälper dig att implementera smidig rullning med JavaScript.

Smidig rullning är när en webbsida rullar smidigt till önskat avsnitt, istället för att hoppa dit direkt. Detta gör rullningsupplevelsen mer behaglig och sömlös för användaren.

Jämn rullning kan förbättra användarupplevelsen av en webbsida på flera sätt:

  • Den förstärker den visuella attraktionskraften genom att eliminera plötsliga och skakande rullningshopp, vilket ger en touch av elegans.
  • Det uppmuntrar användarengagemang genom att ge en smidig och sömlös rullningsupplevelse. Detta motiverar i sin tur användare att utforska innehållet ytterligare.
  • Slutligen, smidig rullning gör navigeringen enklare för användare, särskilt när de har att göra med långa webbsidor eller flyttar mellan olika avsnitt.
    instagram viewer

För att implementera smidig rullning kan du ändra standardrullningsbeteendet med JavaScript.

HTML-struktur

Skapa först de nödvändiga uppmärkningselementen för de olika visningsportarna och navigeringen för att bläddra mellan dem.

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>

Denna HTML består av ett navigeringsfält som innehåller tre ankartaggar. Href-attributet för varje ankare anger målsektionens unika identifierare (t.ex. sektion1, sektion2, sektion3). Detta säkerställer att varje länk du klickar på navigerar till motsvarande målelement.

CSS-styling

Använd sedan lite CSS för att göra sidan synbart tilltalande och organiserad. Lägg till följande till style.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;
}

Detta kommer att göra länkarna som en rad med knappar och varje sektion som ett element i full höjd. Men lägg märke till hur ett klick på en länk får webbläsaren att omedelbart hoppa till motsvarande avsnitt, utan animering.

JavaScript-implementering

Om du vill lägga till en smidig animering när du klickar på en ankartagg använder du metoden scrollIntoView(). Metoden scrollIntoView() är en inbyggd JavaScript-metod av klassen Element som låter dig rulla ett element till det synliga området i webbläsarfönstret.

När du anropar den här metoden justerar webbläsaren rullningspositionen för elementets behållare (som fönstret eller en rullbar behållare) för att göra elementet synligt.

Lägg till din JavaScript-kod i script.js fil. Börja med att lyssna efter att DOMContentLoaded-händelsen utlöses innan du gör något annat. Detta säkerställer att återuppringningen endast körs när DOM är fulladdat och är redo att manipulera.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Därefter definierar du makeLinksSmooth() fungera. Börja med att välja ankartaggarna i navigeringen, eftersom du vill ändra deras beteende. Iterera sedan över varje länk och lägg till en händelseavlyssnare för dess klickhändelse.

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

Slutligen, definiera smoothScroll() funktion som tar ett händelseavlyssnarobjekt. Anrop preventDefault() för att säkerställa att webbläsaren inte utför sin standardåtgärd när du klickar på länken. Koden som följer kommer att ersätta den.

Ta tag i href-värdet för den aktuella ankartaggen och lagra den i en variabel. Det värdet ska vara ID för målavsnittet, med prefixet "#", så använd det för att välja avsnittets element via querySelector(). Om targetElement finns, kör dess scrollIntoView metod och skicka det "släta" beteendet i en objektparameter för att slutföra effekten.

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

Med det kommer din färdiga webbsida att rulla smidigt till varje avsnitt när du klickar på en länk:

För att ytterligare förbättra den smidiga rullningsupplevelsen kan du finjustera vissa aspekter.

Du kan justera rullningens vertikala position med hjälp av blockera egenskapen för argumentet inställningar. Använd värden som "start", "center" eller "slut" för att identifiera den del av målelementet som ska rullas till:

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

Lägga till lättnadseffekter

Tillämpa lättnadseffekter på rullningsanimeringen för att skapa en mer naturlig och visuellt tilltalande övergång. Lättnadsfunktioner som lätta in, lätta ut eller anpassade cubic-bezier kurvor kan styra scrollrörelsens acceleration och retardation. Du kan använda en anpassad timingfunktion med CSS-egenskapen för rullningsbeteende eller ett JavaScript-bibliotek som "smooth-scroll" för att uppnå samma resultat.

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

Se till att din implementering av smidig rullning fungerar konsekvent i olika webbläsare. Testa och hantera alla webbläsarspecifika egenheter eller inkonsekvenser som kan uppstå.

Du kan använda en webbplats som Kan jag använda för att testa webbläsarstöd när du bygger. Överväg att använda ett JavaScript-bibliotek eller polyfill för att säkerställa kompatibilitet över webbläsare och ge en sömlös upplevelse för alla användare.

Smidig rullning ger en touch av elegans och förbättrar användarupplevelsen genom att skapa en flytande och visuellt tilltalande rullningseffekt. Genom att följa stegen som beskrivs i den här guiden kan webbutvecklare implementera smidig rullning med JavaScript.

Att finjustera rullningsbeteendet, lägga till lättnadseffekter och säkerställa kompatibilitet över webbläsare förbättra den smidiga rullningsupplevelsen ytterligare, vilket gör dina webbsidor mer engagerande och roligare navigera.