Merhaba,

Bugün arayıp zor bulabileceğiniz, kısa ama etkili bir css trick kodu önereceğim.

WordPresste veya farketmez farklı altyapılı sitelerde sayfa içi linkleriniz var mı?

Bu linklere Anchor Link de deniyor.

Linklere tıkladığınızda pat diye sayfa içi linkine gidiyor mu?

Önce sert geçişi yumuşak geçil olarak modifiye edeceğiz.

Sonrasında Sayfa içi linklerin üst barın altında kalma sorununa el atacağız.

Sayfa İçi Linke Tıklandığında Yumuşak Geçiş

Öncelikle sayfa içi link nasıl yapılır bunu bir özet geçelim:

Sayfanızda H1 H2 H3 H4 H5 H6 gibi başlık çeşitleri bulunur.

Örneğin bu yazının ana başlığının tag ı H1 dir

Bu yazının üst başlığı olan “sayfa içi link yumuşak geçiş” yazısı h2 dir.

Sonraki başlıklar hiyerarşiye göre H3 H4 H5 H6 diye gidebilir.

Genelde seo için uygun olan H1 den 1 adet, H2 den iki adet, H3 H4 H5 H6 dan daha fazla kullanılmasıdır.

Kullandığımız bu başlıklara “içindekiler eklentisi” veya “içindekiler fihrist kodu” kullandığımızda otomatik olarak linke dönüşür.

Bu durumda fihrist niteliğindeki içindekiler listesi H taglarından linklere bürünür.

Bu linklere tıkladığınızda sayfanın o bölgesine ışınlanırsınız.

Bunu ayrıca H taglarından bağımsız olarak manuel şekilde de yapabiliriz. Örnek Kod:

<p id="ornek_yaziya_git">Bu okuduğunuz yazı örnek yazıdır. Bu kodu sayfanızın istediğiniz bir yerine koyabilirsiniz. Sonuçta id kısmına gitulan diye bir çengel attık yani adres belirttik. Yani bu yazıya sayfanın başka bir yerinden yapacağımız basit link ile otomatik olarak ışınlanacağız.</p>

<a href="#ornek_yaziya_git">Örnek yazıya git.(Burayı sayfanın neresine koyarsanız örnek yazıya gider.)</a>

YUMUŞAK GEÇİŞ

Yumuşak geçiş kodu kullanmadığınızda, sayfa içi linklere tıklandığında Sayfanın adreslenen alanına pat diye gidiverir.

Bu durumda insanlar sayfanın neresine gittiğini algılayamaz.

Sanki farklı sayfa açmış zannedip geri tuşuna basma isteği bile oluşabilir.

Yumuşak geçiş efektini uygularsak sayfanın üst bölgesinden H başlığına veya id adresine (scroll) yavaşça akar ve tıklanan yerden asıl yere nasıl geldiğinizi canlı canlı görürsünüz.

Bunu ufak bir css kodu ile sağlıyoruz.

☝ Tıklayınca bu şekilde yumuşak geçiş yapar.

Scroll Yumuşak Geçiş Kodu

html{
  scroll-behavior: smooth;
}

Bu kodu wordpresste Görünüm/Özelleştir/Gelişmiş Seçenekler/Ek Css kısmından ekleyebilirsiniz.

WordPress harici sayfalarınızda css alanına ekleyebilirsiniz.

Düz bir site kullanıyorsanız Html alanına ekleyecekseniz <style></style> arasına ekleyiniz.

Bu kod ile yumuşak geçişi sağladık.

---

Sayfa İçi Linkler Üst Barın Altında Kalıyor (Çözüm)

WordPresste top bar da denebilir. sayfanın en üstünde bir bar bulunur.

Bu bar, sayfayı aşağı kaydırırken kaybolurken yukarı kaydırırken tekrar gözükebilir, ya da sayfada siz kaydırdıkça yapışıktır sürekli de görülebilir.

Nitekim bu bar sayfanın üst tarafında bir alan kaplar.

Siz sayfa içi linklere (içindekiler tablosu vs.) tıkladığınızda, olması gereken; “başlığın” sayfanın en üstünde gözükmesidir.

Fakat bahsi geçen bu “bar” zaten sayfanın en üstünde olduğundan başlığın üstünü kaplar ve başlık görünmez bu da karmaşaya yol açar.

Bu durumu ufak bir css kodu yardımı ile çözeceğiz.

Scroll-Margin-Top

scroll-margin-top: 50px kodunun sayfa ve yazılarımdaki H2 H3 H4 H5 H6 başlıklarında çalışmasını istiyorum.

.h2, .h3, .h4, .h5, .h6 {
   scroll-margin-top: 50px;
}

Bu kod ile H taglarına diyoruz ki;

Biri yazı içi linkine tıklarsa sayfa başlığına tekabül gelen başlık alanının üstünde 50px lik bir boşluk olsun.

Bu sayede nav bar gibi top bar gibi üst barlar sayfanın başlığının üstüne geçmemiş olur.

Kodun nasıl çalıştığını (bilgisayardan giriyorsanız) sitenin sol üst köşesinden İçindekiler alanından tıklamalar ile deneyebilirsiniz.

---

Basit ama çok etkili bir konudur.

Bu konuyu ararken:

• Fixed Navbar with smooth scroll
• Smooth-scrolling
• Smooth page scrolling navigation bar

Gibi araya taraya çözümü zor buldum.

---

Bonus: Sayfa İçi Linke Tıkladığınızda Link Renkli Gözüksün (Link Vurgulama)

Bu konuyu bonus olarak koyuyorum. Madem ki sayfa içi linklerine değindik. Bu kod beraberinde olmazsa olmazlarımdan.

Sayfa içi linke tıkladığınızda o alana gider ve başlık yukarıda gözükür dedik.

Başlık yukarıda gözükse dahi kullanıcılar sayfanın ortasına falan ışınlanınca o başlığa odaklanamıyor.

Başlığı renkle vurgulayarak odak noktasını siz belirliyorsunuz.

:target {
   background-color: #ffa;
}

bacground-color yerine başka kodlar da ekleyebilirsiniz.

Border olur font yazı efekti olur artık hayal gücünüze kalmış.

---

Umarım beğenirsiniz Bir yorumu az görmeyin sevgili 100numaraliadam takipçilerim.

Hoşçakalınız efemm.