Canlı Önizleme
Bölüm 1
Navbardan tıklandığında buraya pürüzsüz kayar.
Bölüm 2
Mükemmel CSS Scroll özelliği!
Nasıl Kullanılır?
Gerçek bir sitede html { scroll-behavior: smooth; } kuralını eklemeniz yeterlidir. Tıklanan linkler href='#idyazisi' ve gidilecek alan id='idyazisi' mantığıyla haritada yol bulur.
Kaynak Kodlar
HTML
<!-- Smooth Scroll Etkinleştiren CSS Kuralı (Genel CSS'inizde yer almalı) -->
<!-- html { scroll-behavior: smooth; } -->
<nav class="smooth-nav">
<a href="#section1">Bölüm 1</a>
<a href="#section2">Bölüm 2</a>
</nav>
<div class="scroll-container">
<div id="section1" class="scroll-section">
<h2>Bölüm 1</h2>
<p>Navbardan tıklandığında buraya pürüzsüz kayar.</p>
</div>
<div id="section2" class="scroll-section" style="background: #00cec9; color:#1a1a24;">
<h2>Bölüm 2</h2>
<p>Mükemmel CSS Scroll özelliği!</p>
</div>
</div>CSS
/* Kapsayıcı Konteyner (Örnek Demo İçin Sınırlandırıldı) */
.scroll-container { width: 100%; height: 250px; overflow-y: scroll; scroll-behavior: smooth; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); margin-top: 15px; position: relative; }
.scroll-section { height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #2a2a35; color: #fff; font-family: 'Inter', sans-serif; }
/* Navbar Stili */
.smooth-nav { background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px; display: flex; gap: 10px; justify-content: center; }
.smooth-nav a { background: #6C5CE7; color: #fff; text-decoration: none; padding: 8px 15px; border-radius: 5px; font-family: 'Inter', sans-serif; font-size: 14px; transition: 0.3s; }
.smooth-nav a:hover { background: #8073ea; transform: scale(1.05); }
/* Gerçek siteniz için gereken tek kural scroll-behavior: smooth; 'tur! */