En guide för webbutvecklare

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.

Fördelarna med smidig rullning

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.

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.

 <!DOCTYPE html> 
<html lang="en">

<head>
 <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
  <title>Smooth Scrolling Guide for Web Developers</title>
</head>

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

  <section id="section1">
    <h2>Section 1</h2>
  </section>

  <section id="section2">
    <h2>Section 2</h2>
  </section>

  <section id="section3">
    <h2>Section 3</h2>
  </section>

  <script src="https://wilku.top/a-guide-for-web-developers/./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 i style.css:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

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

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

nav ul li {
  list-style: none;
}

nav ul li a {
  border-radius: 5px;
  border: 1.5px solid #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(). ScrollIntoView()-metoden ä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 filen script.js. 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 redo att manipuleras.

 document.addEventListener("DOMContentLoaded", makeLinksSmooth); 

Därefter definierar du makeLinksSmooth()-funktionen. 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.

 function makeLinksSmooth() { 
  const navLinks = document.querySelectorAll("nav a");

  navLinks.forEach((link) => {
    link.addEventListener("click", smoothScroll);
  });
}

Slutligen, definiera smoothScroll()-funktionen 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ålsektionen, med prefixet ”#”, så använd det för att välja sektionens element via querySelector(). Om targetElementet är närvarande, kör dess scrollIntoView-metod och skicka det ”släta” beteendet i en objektparameter för att slutföra effekten.

 function smoothScroll(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.

Justera rullningsposition

Du kan justera den vertikala positionen för rullningen med hjälp av blockegenskapen för inställningsargumentet. 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 kubikbezierkurvor kan styra rullningsrörelsens acceleration och retardation. Du kan använda en anpassad tidsfunktion med CSS-egenskapen för rullningsbeteende eller ett JavaScript-bibliotek som ”smooth-scroll” för att uppnå samma resultat.

  
html {
  scroll-behavior: smooth;

  
  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 kommer ytterligare att förbättra den smidiga rullningsupplevelsen, vilket gör dina webbsidor mer engagerande och roligare att navigera.