Сделайте ваши ссылки на одну и ту же страницу немного приятнее для использования с помощью этого встроенного эффекта плавной прокрутки.

Плавная прокрутка — это метод, используемый в веб-разработке для создания плавной прокрутки для пользователей. Он улучшает навигацию по веб-странице, анимируя движение прокрутки вместо резкого скачка по умолчанию.

Это подробное руководство для веб-разработчиков поможет вам реализовать плавную прокрутку с помощью 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 состоит из панели навигации, содержащей три тега привязки. Атрибут href каждой привязки указывает уникальный идентификатор целевого раздела (например, section1, section2, section3). Это гарантирует, что каждая ссылка, по которой вы нажимаете, ведет к соответствующему целевому элементу.

CSS-стиль

Затем примените немного CSS, чтобы сделать страницу визуально привлекательной и организованной. Добавьте следующее в стиль.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() является встроенный метод JavaScript класса Element, который позволяет прокручивать элемент в видимую область окна браузера.

Когда вы вызываете этот метод, браузер настраивает положение прокрутки контейнера элемента (например, окна или контейнера с возможностью прокрутки), чтобы сделать элемент видимым.

Добавьте свой код JavaScript в script.js файл. Прежде чем делать что-либо еще, начните с прослушивания события DOMContentLoaded. Это гарантирует, что обратный вызов выполняется только когда DOM полностью загружен и готов манипулировать.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Далее определите сделатьLinksSmooth() функция. Начните с выбора тегов привязки в навигации, так как вы захотите изменить их поведение. Затем выполните итерацию по каждой ссылке и добавьте прослушиватель событий для ее события click.

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

Наконец, определите гладкая прокрутка() функция, которая принимает объект прослушивателя событий. Вызовите preventDefault(), чтобы браузер не выполнял действие по умолчанию, когда вы щелкаете ссылку. Следующий код заменит его.

Возьмите значение href текущего тега привязки и сохраните его в переменной. Это значение должно быть идентификатором целевого раздела с префиксом «#», поэтому используйте его для выбора элемента раздела через селектор запросов(). Если targetElement присутствует, запустите его прокрутитьIntoView метод и передайте «гладкое» поведение в параметре объекта, чтобы завершить эффект.

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 scroll-behavior или библиотеку JavaScript, например «smooth-scroll», для достижения того же результата.

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

Убедитесь, что ваша реализация плавной прокрутки одинаково работает в разных браузерах. Тестируйте и обрабатывайте любые причуды или несоответствия, которые могут возникнуть в браузере.

Вы можете использовать веб-сайт, например Могу ли я использовать для проверки поддержки браузера при сборке. Рассмотрите возможность использования библиотеки JavaScript или полифилла, чтобы обеспечить кросс-браузерную совместимость и обеспечить бесперебойную работу для всех пользователей.

Плавная прокрутка добавляет нотку элегантности и улучшает взаимодействие с пользователем, создавая плавный и визуально приятный эффект прокрутки. Следуя шагам, описанным в этом руководстве, веб-разработчики могут реализовать плавную прокрутку с помощью JavaScript.

Точная настройка поведения прокрутки, добавление эффектов плавности и обеспечение кросс-браузерной совместимости еще больше улучшите плавную прокрутку, сделав ваши веб-страницы более привлекательными и приятными для просмотра. ориентироваться.