Bu yerel yumuşak kaydırma efektiyle aynı sayfa bağlantılarınızı biraz daha hoş hale getirin.

Düzgün kaydırma, web geliştirmede kullanıcılar için akıcı bir kaydırma deneyimi oluşturmak için kullanılan bir tekniktir. Varsayılan ani atlama yerine kaydırma hareketini canlandırarak bir web sayfasındaki gezinmeyi geliştirir.

Web geliştiricilerine yönelik bu kapsamlı kılavuz, JavaScript kullanarak sorunsuz kaydırmayı uygulamanıza yardımcı olacaktır.

Düzgün kaydırma, bir web sayfasının istenen bölüme anında atlamak yerine düzgün bir şekilde kaydırılmasıdır. Bu, kaydırma deneyimini kullanıcı için daha keyifli ve sorunsuz hale getirir.

Düzgün kaydırma, bir web sayfasının kullanıcı deneyimini çeşitli şekillerde iyileştirebilir:

  • Ani ve sarsıcı kaydırma atlamalarını ortadan kaldırarak görsel çekiciliği artırır ve bir zarafet katar.
  • Akıcı ve kusursuz bir kaydırma deneyimi sunarak kullanıcı katılımını teşvik eder. Bu da, kullanıcıları içeriği daha fazla keşfetmeye motive eder.
  • Son olarak, düzgün kaydırma, özellikle uzun web sayfalarıyla uğraşırken veya farklı bölümler arasında gezinirken kullanıcılar için gezinmeyi kolaylaştırır.
    instagram viewer

Düzgün kaydırmayı uygulamak için JavaScript kullanarak varsayılan kaydırma davranışını değiştirebilirsiniz.

HTML Yapısı

İlk olarak, farklı görünüm pencereleri ve aralarında gezinmek için gerekli işaretleme öğelerini oluşturun.

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>

Bu HTML, üç bağlantı etiketi tutan bir gezinme çubuğundan oluşur. Her bağlantının href özelliği, hedef bölümün benzersiz tanımlayıcısını belirtir (ör. bölüm1, bölüm2, bölüm3). Bu, tıkladığınız her bağlantının ilgili hedef öğeye gitmesini sağlar.

CSS Stili

Ardından, sayfayı görünür şekilde çekici ve düzenli hale getirmek için biraz CSS uygulayın. Aşağıdakileri ekleyin stil.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;
}

Bu, bağlantıları bir dizi düğme ve her bölümü tam yükseklikte bir öğe olarak işleyecektir. Ancak bir bağlantıya tıklamanın, tarayıcının animasyon olmadan anında ilgili bölüme nasıl atladığına dikkat edin.

JavaScript Uygulaması

Diğerinde, bir bağlantı etiketine tıkladığınızda pürüzsüz bir animasyon eklemek için scrollIntoView() yöntemini kullanın. scrollIntoView() yöntemi, yerleşik JavaScript yöntemi Bir öğeyi tarayıcı penceresinin görünür alanına kaydırmanıza izin veren Element sınıfının.

Bu yöntemi çağırdığınızda, tarayıcı, öğeyi görünür kılmak için öğe kabının (pencere veya kaydırılabilir kap gibi) kaydırma konumunu ayarlar.

JavaScript kodunuzu şuraya ekleyin: komut dosyası.js dosya. Başka bir şey yapmadan önce DOMContentLoaded olayının tetiklenmesini dinleyerek başlayın. Bu, geri aramanın yalnızca çalışmasını sağlar DOM tamamen yüklendiğinde ve manipüle etmeye hazır.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Ardından, makeLinksSmooth() işlev. Davranışlarını değiştirmek isteyeceğiniz için gezintide bağlantı etiketlerini seçerek başlayın. Ardından, her bağlantı üzerinde yineleme yapın ve tıklama olayı için bir olay dinleyicisi ekleyin.

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

Son olarak, tanımlayın pürüzsüz Kaydırma() bir olay dinleyici nesnesi alan işlev. Bağlantıyı tıklattığınızda tarayıcının varsayılan eylemini gerçekleştirmemesini sağlamak için PreventionDefault() öğesini çağırın. Aşağıdaki kod onun yerini alacaktır.

Geçerli bağlantı etiketinin href değerini alın ve bir değişkende saklayın. Bu değer, "#" ön ekiyle birlikte hedef bölümün kimliği olmalıdır, bu nedenle bölümün öğesini şu şekilde seçmek için kullanın: sorguSelector(). targertElement mevcutsa, çalıştırın görünüme geç yöntemini kullanın ve efekti tamamlamak için bir nesne parametresinde "yumuşak" davranışı iletin.

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

Bununla, bir bağlantıya tıkladığınızda bitmiş web sayfanız her bölüme sorunsuz bir şekilde kaydırılır:

Düzgün kaydırma deneyimini daha da geliştirmek için belirli yönlerde ince ayar yapabilirsiniz.

Kaydırmanın dikey konumunu kullanarak ayarlayabilirsiniz. engellemek ayarlar bağımsız değişkeninin özelliği. Hedef öğenin kaydırılacak bölümünü belirlemek için "başlangıç", "merkez" veya "bitiş" gibi değerleri kullanın:

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

Hareket Efektleri Ekleme

Daha doğal ve görsel olarak çekici bir geçiş oluşturmak için kaydırma animasyonuna yumuşatma efektleri uygulayın. Kolay giriş, kolay çıkış veya özel gibi hızlanma işlevleri kübik bezier eğrileri kaydırma hareketinin hızlanmasını ve yavaşlamasını kontrol edebilir. Aynı sonucu elde etmek için scroll-behavior CSS özelliğiyle özel bir zamanlama işlevi veya "smooth-scroll" gibi bir JavaScript kitaplığı kullanabilirsiniz.

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

Düzgün kaydırma uygulamanızın farklı tarayıcılarda tutarlı bir şekilde çalıştığından emin olun. Doğabilecek tarayıcıya özgü tuhaflıkları veya tutarsızlıkları test edin ve ele alın.

gibi bir site kullanabilirsin Kullanabilirmiyim oluştururken tarayıcı desteğini test etmek için. Tarayıcılar arası uyumluluğu sağlamak ve tüm kullanıcılar için sorunsuz bir deneyim sağlamak için bir JavaScript kitaplığı veya çoklu doldurma kullanmayı düşünün.

Düzgün kaydırma, bir zarafet katar ve akıcı ve görsel olarak hoş bir kaydırma efekti yaratarak kullanıcı deneyimini geliştirir. Web geliştiricileri, bu kılavuzda özetlenen adımları izleyerek JavaScript kullanarak düzgün kaydırma uygulayabilir.

Kaydırma davranışında ince ayar yapmak, hareket hızı efektleri eklemek ve tarayıcılar arası uyumluluğu sağlamak, pürüzsüz kaydırma deneyimini daha da geliştirerek web sayfalarınızı daha ilgi çekici ve keyifli hale getirin gezinmek