Spraw, aby linki do tej samej strony były nieco przyjemniejsze w użyciu dzięki temu natywnemu efektowi płynnego przewijania.
Płynne przewijanie to technika stosowana w tworzeniu stron internetowych w celu zapewnienia użytkownikom płynnego przewijania. Poprawia nawigację na stronie internetowej, animując ruch przewijania zamiast domyślnego skoku.
Ten obszerny przewodnik dla twórców stron internetowych pomoże Ci zaimplementować płynne przewijanie za pomocą JavaScript.
Płynne przewijanie polega na płynnym przewijaniu strony internetowej do żądanej sekcji zamiast natychmiastowego przeskakiwania do niej. Dzięki temu przewijanie jest przyjemniejsze i płynniejsze dla użytkownika.
Płynne przewijanie może poprawić komfort korzystania ze strony internetowej na kilka sposobów:
- Poprawia atrakcyjność wizualną, eliminując nagłe i wstrząsające skoki przewijania, dodając odrobinę elegancji.
- Zachęca użytkowników do zaangażowania, zapewniając płynne i bezproblemowe przewijanie. To z kolei motywuje użytkowników do dalszego eksplorowania treści.
- Wreszcie, płynne przewijanie ułatwia użytkownikom nawigację, szczególnie w przypadku długich stron internetowych lub przechodzenia między różnymi sekcjami.
Aby zaimplementować płynne przewijanie, możesz zmodyfikować domyślne zachowanie przewijania za pomocą JavaScript.
Struktura HTML
Najpierw utwórz niezbędne elementy znaczników dla różnych rzutni i nawigacji, aby przewijać między nimi.
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>
Ten kod HTML składa się z paska nawigacyjnego zawierającego trzy znaczniki zakotwiczenia. Atrybut href każdej kotwicy określa unikalny identyfikator sekcji docelowej (np. sekcja1, sekcja2, sekcja3). Dzięki temu każdy kliknięty link prowadzi do odpowiedniego elementu docelowego.
Stylizacja CSS
Następnie zastosuj trochę CSS, aby strona była wyraźnie atrakcyjna i zorganizowana. Dodaj następujące do styl.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;
}
Spowoduje to wyrenderowanie łączy jako rzędu przycisków, a każdej sekcji jako elementu o pełnej wysokości. Ale zauważ, jak kliknięcie łącza powoduje natychmiastowe przejście przeglądarki do odpowiedniej sekcji bez animacji.
Implementacja JavaScriptu
Aby dodać płynną animację po kliknięciu znacznika kotwicy, użyj metody scrollIntoView(). Metoda scrollIntoView() to a wbudowana metoda JavaScript klasy Element, która umożliwia przewinięcie elementu do widocznego obszaru okna przeglądarki.
Po wywołaniu tej metody przeglądarka dostosowuje pozycję przewijania kontenera elementu (takiego jak okno lub przewijalny kontener), aby element był widoczny.
Dodaj swój kod JavaScript do skrypt.js plik. Zacznij od nasłuchiwania, czy zdarzenie DOMContentLoaded zostanie uruchomione, zanim zrobisz cokolwiek innego. Dzięki temu wywołanie zwrotne działa tylko gdy DOM jest w pełni załadowany i jest gotowy do manipulacji.
document.addEventListener("DOMContentLoaded", makeLinksSmooth);Następnie zdefiniuj makeLinksSmooth() funkcjonować. Zacznij od wybrania tagów kotwicy w nawigacji, ponieważ będziesz chciał zmodyfikować ich zachowanie. Następnie przejrzyj każdy link i dodaj detektor zdarzeń dla jego zdarzenia kliknięcia.
functionmakeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}
Na koniec zdefiniuj smoothScroll() funkcja, która pobiera obiekt detektora zdarzeń. Wywołaj metodę PreventDefault(), aby upewnić się, że przeglądarka nie wykona swojej domyślnej akcji po kliknięciu łącza. Poniższy kod zastąpi go.
Chwyć wartość href bieżącego tagu kotwicy i zapisz ją w zmiennej. Ta wartość powinna być identyfikatorem sekcji docelowej z przedrostkiem „#”, więc użyj jej, aby wybrać element sekcji za pomocą zapytanieSelektor(). Jeśli targetertElement jest obecny, uruchom jego przewiń do widoku metodę i przekazać zachowanie „gładkie” w parametrze obiektu, aby zakończyć efekt.
functionsmoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}
Dzięki temu gotowa strona internetowa będzie płynnie przewijać się do każdej sekcji po kliknięciu łącza:
Aby jeszcze bardziej ulepszyć płynne przewijanie, możesz dostosować niektóre aspekty.
Pionową pozycję przewijania można dostosować za pomocą blok właściwość argumentu ustawienia. Użyj wartości takich jak „początek”, „środek” lub „koniec”, aby zidentyfikować część elementu docelowego, do której chcesz przewinąć:
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Dodawanie efektów wygładzania
Zastosuj efekty wygładzania do animacji przewijania, aby uzyskać bardziej naturalne i atrakcyjne wizualnie przejście. Funkcje wygładzania, takie jak ułatwienie, ułatwienie lub niestandardowe krzywe sześcienne-beziera może kontrolować przyspieszanie i zwalnianie ruchu przewijania. Możesz użyć niestandardowej funkcji synchronizacji z właściwością CSS typu scroll-behavior lub biblioteki JavaScript, takiej jak „smooth-scroll”, aby osiągnąć ten sam rezultat.
/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Upewnij się, że implementacja płynnego przewijania działa spójnie w różnych przeglądarkach. Testuj i obsługuj wszelkie dziwactwa lub niespójności specyficzne dla przeglądarki, które mogą się pojawić.
Możesz skorzystać ze strony internetowej np Mogę uzyć przetestować obsługę przeglądarki podczas budowania. Rozważ użycie biblioteki JavaScript lub polyfill, aby zapewnić kompatybilność z różnymi przeglądarkami i zapewnić bezproblemową obsługę wszystkim użytkownikom.
Płynne przewijanie dodaje elegancji i poprawia wrażenia użytkownika, tworząc płynny i przyjemny wizualnie efekt przewijania. Wykonując czynności opisane w tym przewodniku, twórcy stron internetowych mogą zaimplementować płynne przewijanie za pomocą JavaScript.
Dopracowanie sposobu przewijania, dodanie efektów wygładzania i zapewnienie kompatybilności między przeglądarkami pozwoli jeszcze bardziej ulepsz płynne przewijanie, dzięki czemu Twoje strony internetowe będą bardziej wciągające i przyjemniejsze nawigować.
