Squarespace'e Başa Dön Butonu Nasıl Eklenir?

Squarespace’e başa dön butonu eklediğinizde müşterileriniz size teşekkür edecek. Ancak  bu özellik göründüğünden biraz daha karmaşıktır. Squarespace’te yerleşik bir başa dön butonu bulunmaz. Bu eksikliği kodlama gerektirmeyen bir widget, biraz özel kod ya da bir bağlantı çapası (anchor link) kullanarak gidermeniz gerekir.

Bu kesinlikle uğraşmaya değer. Uzun açılış sayfaları ve kapsamlı blog yazıları, ziyaretçileri uzun bir kaydırmanın sonunda sayfanın en altında çaresiz bırakır. Günümüzde gezinmenin büyük kısmının yapıldığı mobil cihazlarda, baş parmakla sayfanın en üstüne kadar kaydırmak, ziyaretçinin ilgisini kaybetmenin en hızlı yollarından biridir. 

Başa dön butonu, ziyaretçilerin sitenizi hemen terk etmek yerine sitenizde gezinmeye devam etmesini sağlar. Bu küçük gezinme iyileştirmesi, insanların ilgisini gerçekten canlı tutan bir web sitesi nasıl yapılır stratejisinin önemli bir parçasıdır.

Bu rehberde önce kodlama gerektirmeyen en kolay yöntemi ele alacak, ardından daha fazla tasarım kontrolü ya da sade, yerleşik bir seçenek arayanlar için iki alternatif yöntemi inceleyeceğiz.

En kolay yöntem: Squarespace için bir başa dön widget’ı kullanın

En hızlı seçenek, hazır bir başa dön widget’ı bulmaktır. Örneğin Jotform’un Başa Dön Widget’ı, bu butonları yalnızca birkaç dakika içinde sayfalarınızda yayına almanızı sağlayan ücretsiz ve kodlama gerektirmeyen bir araçtır. Bu aracı kullanarak kayan bir buton tasarlayabilir, bir yerleştirme kodu oluşturabilir ve tek satır CSS ya da JavaScript koduna dokunmadan bu kodu Squarespace’e ekleyebilirsiniz.

Süreç şu şekilde işler:

1. Widget’ınızı özelleştirin. Jotform’un widget oluşturucusunu açmak için yukarıdaki bağlantıyı kullanın ve parametreleri düzenlemeye başlayın. Simge stillerini değiştirebilir, butonunuzun boyutunu ve köşe yuvarlaklığını ayarlayabilir, hatta markanıza uygun renkler seçebilirsiniz. Widget sayesinde butonu ekranda kolayca istediğiniz yere taşıyabilir, kenarlardaki boşlukları ayarlayabilir ve masaüstü ile mobil kullanıcılar için görünürlüğü açıp kapatabilirsiniz.

2. Yerleştirme kodunu alın. Buton istediğiniz görünüme kavuştuğunda Jotform, kullanıma hazır bir yerleştirme kodu oluşturur. Eklenti kurulumu yok, kurulum adımları yok, hiçbir zahmet yok.

3. Kodu Squarespace’e yapıştırın. Bu noktada Squarespace’in güncel arayüzü devreye girer. İki ana seçeneğiniz vardır:

• Tüm sitede (başa dön butonları için önerilir): Squarespace kontrol panelinizde sol menüden Pages (Sayfalar) bölümüne gidin, aşağı kaydırarak Custom Code (Özel Kod) bölümünü bulun ve Code Injection (Kod Ekleme) seçeneğine tıklayın. Yerleştirme kodunu Footer (Alt Bilgi) alanına yapıştırın ve Save (Kaydet) butonuna tıklayın. Buton, otomatik olarak her sayfada görünecektir. (Not: Tüm sitede Kod Ekleme özelliği Business ve üzeri planlarda kullanılabilir.)

• Yalnızca tek bir sayfada: Butonun yer almasını istediğiniz sayfayı düzenleyin, blok eklemek için + simgesine tıklayın ve Code (Kod) seçeneğini belirleyin. Yerleştirme kodunu buraya yapıştırın ve kaydedin. Buton yalnızca o sayfada görünür, ancak bu işlemi butona ihtiyaç duyan her sayfada tekrarlayabilirsiniz.

Hepsi bu kadar. Sitenizi yenilediğinizde buton, ziyaretçileri tek dokunuşla sayfanın en üstüne götürmeye hazır şekilde görünür. Daha önce Squarespace’e form ekleme adımlarını uyguladıysanız, buradaki yerleştirme sürecinin de tamamen aynı olduğunu göreceksiniz.

Bu yöntemin genellikle en zahmetsiz yol olmasının birkaç pratik nedeni vardır:

• Otomatik olarak güncellenir. Gelecek ay rengi ya da konumu değiştirmeye karar verirseniz, yapmanız gereken tek şey Jotform’daki widget ayarlarınızı düzenlemektir. Yayındaki widget bu değişikliği hemen yansıtır. Kodu yeniden yapıştırmanıza gerek kalmaz.
• Duyuru çubukları, sosyal medya akışları veya iletişim butonları gibi kullanmak isteyebileceğiniz diğer ücretsiz web sitesi widget’larıyla birlikte sorunsuz çalışır. Bunların hepsi aynı yerleştirme yöntemini kullanır.
• Squarespace kurulumunuzun geri kalanıyla uyumlu çalışır. Formlar aracılığıyla müşteri adayı da topluyorsanız, Jotform + Squarespace entegrasyonu sayesinde aynı yerleştirme yöntemini kullanarak kolayca yeni formlar, ödemeler ve müşteri adayı toplama araçları ekleyebilirsiniz.

Çoğu Squarespace kullanıcısı için iş burada biter. Ancak piksel düzeyinde tam kontrol istiyorsanız okumaya devam edin.

Alternatif yöntem: Özel kodla Squarespace’e başa dön butonu ekleyin

HTML, CSS ve biraz da JavaScript konusunda kendinize güveniyorsanız, kayan bir başa dön butonunu tamamen sıfırdan oluşturabilirsiniz. Squarespace; Code Injection (Kod Ekleme) paneli, Custom CSS (Özel CSS) paneli ve tekil Code (Kod) blokları aracılığıyla özel kodu resmi olarak destekler.

Yalnız bu yöntemin ne kadar zaman alacağını göz önünde bulundurun. Butonun kendisi üzerinde daha fazla esnekliğe sahip olursunuz, ancak daha fazla test ve sorun giderme yapmanız da gerekir. Bu nedenle bu seçenek, genellikle yalnızca çok özel bir görünüme ihtiyaç duyan geliştiriciler için uygundur. Animasyon, kaydırma eşikleri veya kırılma noktası (breakpoint) davranışı üzerinde özel kontrol istiyorsanız da bu yöntemi tercih edebilirsiniz.

Bunu nasıl yapacağınızı aşağıda bulabilirsiniz.

1. Kodun nereye ekleneceğini seçin. Tüm sitede görünmesi gereken bir buton için Website → Pages → Code Injection → Footer (Web Sitesi → Sayfalar → Kod Ekleme → Alt Bilgi) yolunu kullanın. Buraya eklenen kod, her sayfada kapanış </body> etiketinin hemen öncesine eklenir. Belirli bir sayfaya özel tek seferlik bir buton için ise Pages (Sayfalar) panelinde ilgili sayfanın üzerine gelin, dişli simgesine tıklayın, Advanced (Gelişmiş) seçeneğini belirleyin ve bunun yerine Page Header Code Injection (Sayfa Üst Bilgisi Kod Ekleme) alanını kullanın.
2. HTML kodunu ekleyin. Daha sonra hedefleyebilmek için ID’si olan bir buton elemanı ekleyin. Bu genellikle şuna benzer: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Ekran okuyucu erişilebilirliğine katkı sağlaması için aria-label özelliğini mutlaka koruyun.
3. CSS ile stil verin. Şimdi butonun görünümünü ve davranışını CSS ile düzenleyeceksiniz. İşe Custom CSS (Özel CSS) panelini (Website → Website Tools → Custom CSS altında) açarak başlayın. Butonu sağ alt köşeye sabit olarak konumlandırın. Ardından opacity: 0 ve pointer-events: none değerlerini ayarlayarak butonu varsayılan olarak gizleyin. Ayrıca .visible gibi bir sınıf eklendiğinde butonun yumuşak bir şekilde belirmesini sağlayan bir geçiş efekti (transition) eklemeniz gerekir. Son olarak, z-index değerini butonun içeriğinizin üzerinde ancak açılır pencerelerin (modal) altında kalacağı kadar yüksek ayarlayın.
4. JavaScript mantığını ekleyin. Kaydırma konumunu izleyen küçük bir betiğe de ihtiyacınız vardır. Bu sayede buton yalnızca kullanıcı için anlamlı olduğunda görünür. Örneğin ziyaretçi belirlediğiniz bir eşiği (örneğin 300 piksel) geçecek kadar aşağı kaydırdığında betik otomatik olarak .visible sınıfını ekler ve buton görünür hâle gelir. Kullanıcı butona tıkladığında window.scrollTo({ top: 0, behavior: ‘smooth’ }) fonksiyonu çağrılır ve sayfa yumuşak bir animasyonla en üste kaydırılır.

Bu yaklaşımın en büyük avantajı tasarım özgürlüğüdür, ancak bu çoğu şirketin ihtiyaç duyduğu bir şey değildir. Widget’lar ve kod yazmadan uygulama oluşturmanızı sağlayan Jotform Uygulamalar gibi araçlar, butonu kendinize göre özelleştirmenize yetecek kadar esneklik sunar ve size kodlamada büyük zaman kazandırır. Üstelik Squarespace şablonlarında her yapısal değişiklik yaptığında kodunuzu güncellemek zorunda kalmazsınız.

Basit bir çözüm: Başa dön kısayolu olarak bir bağlantı çapası kullanın

Aslında kayan bir butona değil de yalnızca uzun bölümlerin sonunda tıklanabilir bir Başa dön bağlantısına ihtiyacınız varsa, Squarespace’in yerleşik bağlantı çapası özelliği hiç kod gerektirmeden bu işi görür. Squarespace bu özelliği 2025 yılında Squarespace 7.1’in bir parçası olarak kullanıma sundu. İşleyişi şu şekildedir:

1. En üstteki bölümünüze çapayı ekleyin. Başa dön kısayolunu eklemek istediğiniz sayfada Edit (Düzenle) seçeneğine tıklayın. Fare imlecinizi en üstteki bölümün üzerine getirin ve Edit Section (Bölümü Düzenle) seçeneğine tıklayın. Ardından bölüm ayarları panelinin en altında yer alan Anchor Link (Bağlantı Çapası) alanına kaydırın. “top” gibi bir kısa ad (slug) yazın ve URL’nizi almak için kopyala simgesine tıklayın.

2. Başa dön bağlantısını istediğiniz yere ekleyin. Sayfanın daha aşağısına bir buton bloğu ekleyin ya da bir metin bloğu ekleyin. Metni veya butonu seçin, bağlantı simgesine tıklayın ve çapa URL’sini yapıştırın. Ziyaretçi bu bağlantıya tıkladığında sayfa doğrudan en üstteki bölüme geri döner.

3. İsteğe bağlı: Kaydırmayı yumuşatın. Bağlantı çapaları kullanıcıyı anında sayfanın en üstüne gönderir. Bu ani geçiş rahatsız edici olabilir ve ziyaretçinin sitenize olan odağını bozabilir. Bu sorunu hafif bir kaydırma animasyonu ekleyerek çözebilirsiniz. Website → Pages → Custom CSS (Web Sitesi → Sayfalar → Özel CSS) yolunu izleyin ve şu kodu ekleyin:

html {

  scroll-behavior: smooth;

}

Bu tek satırlık kod, sitenizdeki tüm bağlantı çapalarına yumuşak kaydırma efekti uygular.

Bu yöntemin bazı belirgin sınırlamaları vardır. Kayan bir buton olmadığı için ziyaretçiler bağlantıyı yalnızca sayfanın belirli noktalarında (genellikle uzun bölümlerin sonunda veya alt bilgi alanının yakınında) görür. Ayrıca bir widget’ta ya da tüm sitede geçerli özel kodlu bir butonda olduğu gibi her sayfada otomatik olarak görünmez. Yine de hızlıca yukarı kaydırma imkânı sunmanın yeterli olduğu uzun blog yazıları, satış sayfaları veya tek sayfalık siteler için bir bağlantı çapası çoğu zaman işinizi görür.

Not: Bağlantı çapaları blog, etkinlik, portföy veya mağaza bölümlerinde doğrudan desteklenmez. Bunları bu sayfalarda kullanmak için desteklenmeyen bölümün üzerine boş bir bölüm eklemeniz ve çapayı bunun yerine bu boş bölüme yerleştirmeniz gerekir. Boş bölümün ayarlarında Fill Screen (Ekranı Doldur) seçeneğini kapatarak doğru bir görünüm elde edebilirsiniz. Aksi takdirde sayfanın en üstünde göze hoş gelmeyen bir boşluk oluşur.

Squarespace’i karmaşıklaştırmadan başa dön butonu ekleyin

Squarespace sitenizi karmaşıklaştırmadan bu butonları eklemenin en kolay yolunu arıyorsanız, kodlama gerektirmeyen bir widget en hızlı ve en esnek seçenektir. Örneğin Jotform’un Başa Dön Widget’ı ile tek satır kod yazmadan butonunuzu tasarlayabilir, yerleştirebilir ve güncelleyebilirsiniz.

Özel kod size tam tasarım kontrolü sağlar; bu da çok özel görsel hedefleriniz varsa faydalıdır. Yerleşik bağlantı çapası özelliği iyi bir alternatif çözümdür, ancak size aynı ölçüde kontrol sunmaz. Hangisini seçerseniz seçin, yöntemi sitenizin ihtiyaçlarına göre belirleyin ve gereğinden fazlasına girişmeyin.

Squarespace sitenize birkaç dakika içinde şık bir başa dön butonu eklemek için Başa Dön Widget’ını hemen deneyin. Zaten Squarespace formları için Jotform kullanıyorsanız, yerleştirme süreci daha ilk tıklamadan itibaren size tanıdık gelecektir.