Sayfa İçi Linkler Yumuşak Geçiş, Üst Barın Altında Link Kalma Problemi (CSS)

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.

100numaraliadam Yeni Konu:  Google Adsense Site Geliri (Sorular Cevaplar)

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.

scroll behavior smooth

☝ 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.

scroll margin top

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
100numaraliadam Yeni Konu:  WORDPRESS FUNCTIONS KODLARI

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


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.

anchor link css highlight

: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.

Yazar: utquick

utquick 1Merhaba, Bu site 2017 senesinde kurulmuştur: Kemal SUNAL 'ın 100 Numaralı Adam filminden feyz alınarak kurulan sitemiz, filmdeki Halk Kahramanı rolünü de bünyesine katarak dürüst paylaşımlarda bulunmaktadır. Bizi takip ediniz. Büyük bir aile oluyoruz. Tek güvencemiz paylaşımlarımızın samimiliğidir.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

css.php