Направете връзките си към една и съща страница малко по-приятни за използване с този естествен ефект на плавно превъртане.

Плавното превъртане е техника, използвана в уеб разработката, за да се създаде гладко изживяване при превъртане за потребителите. Той подобрява навигацията в рамките на уеб страница, като анимира движението на превъртане вместо внезапния скок по подразбиране.

Това изчерпателно ръководство за уеб разработчици ще ви помогне да реализирате плавно превъртане с помощта на JavaScript.

Гладкото превъртане е, когато уеб страница се превърта плавно до желаната секция, вместо да скача там моментално. Това прави скролирането по-приятно и безпроблемно за потребителя.

Гладкото превъртане може да подобри потребителското изживяване на уеб страница по няколко начина:

  • Той подобрява визуалната привлекателност, като елиминира резките и разтърсващи скокове при превъртане, добавяйки нотка елегантност.
  • Той насърчава ангажираността на потребителите, като осигурява плавно и безпроблемно изживяване при превъртане. Това от своя страна мотивира потребителите да изследват съдържанието по-нататък.
    instagram viewer
  • И накрая, плавното превъртане улеснява навигацията за потребителите, особено когато се занимават с дълги уеб страници или се движат между различни секции.

За да реализирате плавно превъртане, можете да промените поведението на превъртане по подразбиране с помощта на JavaScript.

HTML структура

Първо създайте необходимите елементи за маркиране за различните екранни прозорци и навигацията за превъртане между тях.

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>

Този HTML се състои от навигационна лента, съдържаща три anchor етикета. Атрибутът href на всяка котва указва уникалния идентификатор на целевата секция (напр. секция1, секция2, секция3). Това гарантира, че всяка връзка, върху която щракнете, води до съответния целеви елемент.

CSS стилизиране

След това приложете малко CSS, за да направите страницата видимо привлекателна и организирана. Добавете следното към 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;
}

Това ще изобрази връзките като ред от бутони и всяка секция като елемент с пълна височина. Но забележете как щракването върху връзка кара браузъра незабавно да премине към съответния раздел, без анимация.

Внедряване на JavaScript

В други случаи, за да добавите плавна анимация, когато щракнете върху котвен таг, използвайте метода scrollIntoView(). Методът scrollIntoView() е a вграден JavaScript метод от класа Element, който ви позволява да превъртите елемент във видимата област на прозореца на браузъра.

Когато извикате този метод, браузърът настройва позицията на превъртане на контейнера на елемента (като прозореца или контейнер с възможност за превъртане), за да направи елемента видим.

Добавете вашия JavaScript код към script.js файл. Започнете, като слушате събитието DOMContentLoaded да се задейства, преди да направите нещо друго. Това гарантира, че обратното извикване се изпълнява само когато DOM е напълно зареден и е готов да манипулира.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

След това дефинирайте makeLinksSmooth() функция. Започнете, като изберете маркерите за котва в навигацията, тъй като ще искате да промените тяхното поведение. След това преминете през всяка връзка и добавете слушател на събития за нейното събитие за кликване.

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

И накрая, дефинирайте smoothScroll() функция, която приема обект на слушател на събития. Извикайте preventDefault(), за да сте сигурни, че браузърът не изпълнява действието си по подразбиране, когато щракнете върху връзката. Кодът, който следва, ще го замени.

Вземете href стойността на текущия anchor таг и я запазете в променлива. Тази стойност трябва да бъде идентификаторът на целевата секция с префикса "#", така че я използвайте, за да изберете елемента на секцията чрез querySelector(). Ако targetElement е налице, стартирайте го scrollIntoView метод и предайте „гладкото“ поведение в параметър на обект, за да завършите ефекта.

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

С това вашата завършена уеб страница ще се превърта плавно до всеки раздел, когато щракнете върху връзка:

За да подобрите допълнително изживяването с плавно превъртане, можете да настроите фино определени аспекти.

Можете да регулирате вертикалната позиция на скрола, като използвате блок свойство на аргумента за настройки. Използвайте стойности като "начало", "център" или "край", за да идентифицирате частта от целевия елемент, за да превъртите до:

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

Добавяне на облекчаващи ефекти

Приложете облекчаващи ефекти към анимацията за превъртане, за да създадете по-естествен и визуално привлекателен преход. Функции за облекчаване като улесняване на влизане, улесняване на излизане или персонализиране кубични криви на Безие може да контролира ускоряването и забавянето на движението на превъртането. Можете да използвате персонализирана функция за синхронизиране със свойството CSS за поведение при превъртане или JavaScript библиотека като „плавно превъртане“, за да постигнете същия резултат.

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

Уверете се, че внедряването на плавно превъртане работи последователно в различните браузъри. Тествайте и се справяйте с всички специфични за браузъра странности или несъответствия, които могат да възникнат.

Можете да използвате уебсайт като Мога ли да използвам за тестване на поддръжката на браузъра при изграждане. Обмислете използването на JavaScript библиотека или polyfill, за да осигурите съвместимост между различни браузъри и безпроблемно изживяване за всички потребители.

Гладкото превъртане добавя нотка елегантност и подобрява потребителското изживяване, като създава плавен и визуално приятен ефект на превъртане. Следвайки стъпките, описани в това ръководство, уеб разработчиците могат да реализират плавно превъртане с помощта на JavaScript.

Фината настройка на поведението при превъртане, добавянето на облекчаващи ефекти и осигуряването на съвместимост между различни браузъри ще допълнително подобрява плавното изживяване при превъртане, правейки вашите уеб страници по-ангажиращи и приятни навигирайте.