Cara menambahkan tombol kembali ke atas di Squarespace

Pelanggan Anda akan berterima kasih karena Anda menambahkan tombol kembali ke atas di Squarespace. Namun, fitur ini sedikit lebih rumit daripada yang terlihat. Squarespace tidak memiliki tombol kembali ke atas bawaan. Anda perlu menyiasatinya dengan widget tanpa kode, sedikit kode kustom, atau tautan jangkar (anchor link).

Hal ini benar-benar layak dilakukan. Halaman arahan yang panjang dan postingan blog yang mendalam membuat pengunjung terdampar di bagian bawah gulungan yang panjang. Di perangkat seluler, tempat sebagian besar penjelajahan terjadi saat ini, menggulir dengan jempol sampai kembali ke atas adalah cara cepat untuk kehilangan perhatian pengunjung. 

Tombol kembali ke atas membuat orang terus bergerak menjelajahi situs Anda alih-alih meninggalkannya. Ini adalah penyesuaian navigasi kecil yang mendukung strategi yang lebih luas tentang cara membuat situs web yang benar-benar menjaga keterlibatan pengunjung.

Panduan ini membahas jalur tanpa kode yang paling mudah terlebih dahulu, kemudian mengulas dua alternatif bagi siapa saja yang menginginkan kontrol desain lebih besar atau opsi bawaan yang lebih sederhana.

Metode termudah: Gunakan widget kembali ke atas untuk Squarespace

Opsi tercepat adalah menemukan widget kembali ke atas yang sudah jadi. Misalnya, Widget Back to Top dari Jotform adalah alat gratis tanpa kode yang dapat menampilkan tombol-tombol ini di halaman Anda hanya dalam beberapa menit. Anda dapat menggunakannya untuk mendesain tombol mengambang, menghasilkan kode sematan, dan menempatkannya di Squarespace tanpa menyentuh satu baris CSS atau JavaScript pun.

Prosesnya seperti ini:

1. Sesuaikan widget Anda. Gunakan tautan di atas untuk membuka pembuat widget Jotform dan mulai menyesuaikan parameter. Anda dapat mengubah gaya ikon, mengatur ukuran dan radius sudut tombol Anda, bahkan memilih warna agar sesuai dengan merek Anda. Widget ini memudahkan Anda memindahkan tombol ke berbagai bagian layar, menyesuaikan jarak di tepi, dan mengaktifkan atau menonaktifkan visibilitas untuk pengguna desktop dan seluler.

2. Dapatkan kode sematan. Setelah tombol terlihat sesuai keinginan Anda, Jotform menghasilkan kode sematan yang siap digunakan. Tanpa instalasi plugin, tanpa langkah penyiapan, tanpa ribet.

3. Tempelkan ke Squarespace. Di sinilah antarmuka Squarespace saat ini berperan. Anda memiliki dua opsi utama:

• Seluruh situs (direkomendasikan untuk tombol kembali ke atas): Di dasbor Squarespace Anda, buka Pages di menu kiri, gulir ke bawah untuk menemukan bagian Custom Code, dan klik Code Injection. Tempelkan kode sematan ke bidang Footer, lalu klik Save. Tombol akan muncul di setiap halaman secara otomatis. (Catatan: Code Injection untuk seluruh situs tersedia pada paket Business dan yang lebih tinggi.)

• Hanya satu halaman: Edit halaman tempat Anda ingin tombol berada, klik tanda + untuk menambahkan blok, dan pilih Code. Tempelkan kode sematan di sana lalu simpan. Tombol akan muncul hanya di halaman tersebut, tetapi Anda dapat mengulangi langkah ini pada halaman mana pun yang membutuhkannya.

Selesai. Segarkan situs Anda, dan tombol akan muncul, siap membawa pengunjung kembali ke bagian atas halaman. Jika Anda pernah mengikuti langkah-langkah untuk menambahkan formulir ke Squarespace, alur penyematan di sini akan terasa sama persis.

Beberapa alasan praktis mengapa metode ini cenderung menjadi jalan yang paling mudah:

• Metode ini diperbarui secara otomatis. Jika bulan depan Anda memutuskan untuk mengubah warna atau posisi, Anda cukup mengedit pengaturan widget Anda di Jotform. Widget yang aktif kemudian akan mencerminkan perubahan tersebut. Tanpa perlu menempelkan ulang kode.
• Metode ini bekerja berdampingan dengan widget situs web gratis lainnya yang mungkin Anda inginkan, seperti bilah pengumuman, umpan media sosial, atau tombol kontak. Semuanya menggunakan pendekatan penyematan yang sama.
• Metode ini cocok dengan seluruh pengaturan Squarespace Anda. Jika Anda juga mengumpulkan prospek melalui formulir, integrasi Jotform + Squarespace memudahkan Anda menambahkan formulir baru, pembayaran, dan penangkapan prospek menggunakan pola penyematan yang sama.

Bagi sebagian besar pengguna Squarespace, di sinilah proyek ini berakhir. Namun, jika Anda menginginkan kontrol penuh hingga tingkat piksel, teruslah membaca.

Metode alternatif: Menambahkan tombol kembali ke atas di Squarespace dengan kode kustom

Jika Anda nyaman dengan HTML, CSS, dan sedikit JavaScript, Anda dapat membuat tombol kembali ke atas mengambang sepenuhnya dari awal. Squarespace secara resmi mendukung kode kustom melalui panel Code Injection, panel Custom CSS, dan Code Block individual.

Namun, perhatikan berapa banyak waktu yang dibutuhkan untuk ini. Anda akan memiliki lebih banyak fleksibilitas atas tombol itu sendiri, tetapi Anda juga perlu lebih banyak menguji dan memecahkan masalah. Oleh karena itu, opsi ini biasanya hanya tepat bagi para pengembang yang membutuhkan tampilan yang sangat spesifik. Anda juga dapat menggunakannya jika Anda menginginkan kontrol spesifik atas animasi, ambang gulir, atau perilaku titik henti (breakpoint).

Berikut cara melakukannya.

1. Pilih tempat kode akan berada. Untuk tombol yang seharusnya muncul di seluruh situs, gunakan Website → Pages → Code Injection → Footer. Kode yang ditambahkan di sini akan disisipkan tepat sebelum tag </body> penutup di setiap halaman. Untuk tombol sekali pakai pada halaman tertentu, arahkan kursor ke halaman di panel Pages, klik ikon roda gigi, pilih Advanced, dan gunakan Page Header Code Injection sebagai gantinya.
2. Tambahkan HTML. Sisipkan elemen tombol dengan ID agar Anda dapat menargetkannya nanti. Biasanya tampilannya seperti ini: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Pastikan untuk mempertahankan aria-label guna membantu aksesibilitas pembaca layar.
3. Beri gaya dengan CSS. Sekarang Anda mengedit tampilan dan kinerja tombol dengan CSS. Mulailah dengan membuka panel Custom CSS (di bawah Website → Website Tools → Custom CSS). Posisikan tombol sebagai fixed di kanan bawah. Kemudian sembunyikan secara default dengan mengatur opacity: 0 dan pointer-events: none. Anda juga memerlukan transisi yang memudar masuk dengan mulus ketika kelas seperti .visible ditambahkan. Terakhir, atur nilai z-index yang cukup tinggi agar tombol berada di atas konten Anda tetapi di bawah modal apa pun.
4. Tambahkan logika JavaScript. Anda juga memerlukan skrip kecil yang memantau posisi gulir. Dengan begitu, tombol hanya muncul ketika relevan bagi pengguna. Misalnya, setelah pengunjung menggulir melewati ambang yang dipilih (misalnya, 300 piksel), skrip secara otomatis menambahkan kelas .visible, dan tombol akan muncul. Jika pengguna mengklik tombol, skrip akan memanggil window.scrollTo({ top: 0, behavior: ‘smooth’ }), yang menggulir halaman kembali ke atas dalam animasi yang mulus.

Keuntungan terbesar dari pendekatan ini adalah kebebasan desain, tetapi itu bukan sesuatu yang dibutuhkan sebagian besar perusahaan. Widget dan alat seperti Aplikasi Jotform untuk membangun aplikasi tanpa kode menawarkan fleksibilitas yang cukup untuk menjadikan tombol itu milik Anda sendiri dan dapat menghemat banyak waktu pengodean Anda. Selain itu, Anda tidak perlu memperbarui kode Anda setiap kali Squarespace merilis perubahan struktural baru pada templatnya.

Solusi sederhana: Gunakan tautan jangkar sebagai pintasan kembali ke atas

Jika Anda sebenarnya tidak memerlukan tombol mengambang — hanya tautan Kembali ke atas yang dapat diklik di bagian bawah bagian-bagian panjang — fitur tautan jangkar bawaan Squarespace melakukan tugas ini tanpa kode sama sekali. Squarespace menambahkan fitur ini pada tahun 2025 sebagai bagian dari Squarespace 7.1. Berikut cara kerjanya:

1. Atur jangkar pada bagian teratas Anda. Klik Edit pada halaman tempat Anda menginginkan pintasan kembali ke atas. Arahkan kursor mouse Anda ke bagian pertama dan klik Edit Section. Dari sana, gulir ke bidang Anchor Link, yang berada di bagian bawah panel pengaturan bagian. Ketik slug seperti “top” dan klik ikon salin untuk mendapatkan URL Anda.

2. Tambahkan tautan kembali ke atas di mana pun Anda menginginkannya. Tambahkan blok tombol atau blok teks di bagian bawah halaman. Sorot teks atau tombol, klik ikon tautan, dan tempelkan URL jangkar. Ketika pengunjung mengkliknya, halaman akan melompat kembali ke bagian teratas tersebut.

3. Opsional: Buat guliran lebih mulus. Tautan jangkar mengirim pengguna ke bagian atas halaman secara instan, yang bisa terasa mengejutkan dan mengganggu keterlibatan mereka di situs Anda. Atasi ini dengan menambahkan animasi gulir yang halus. Buka Website → Pages → Custom CSS dan tambahkan:

html {

  scroll-behavior: smooth;

}

Satu baris tersebut menerapkan gulir yang mulus pada setiap tautan jangkar di seluruh situs Anda.

Metode ini memiliki beberapa keterbatasan yang jelas. Tombolnya tidak mengambang, sehingga pengunjung hanya melihat tautan tersebut pada titik-titik tertentu di halaman (biasanya di akhir bagian panjang atau di dekat footer). Tautan ini juga tidak akan muncul secara otomatis di setiap halaman, seperti halnya widget atau tombol kode kustom di seluruh situs. Namun, untuk posting blog yang panjang, halaman penjualan, atau situs satu halaman yang hanya membutuhkan gulir cepat ke atas, tautan jangkar sering kali sudah cukup.

Catatan: Tautan jangkar tidak memiliki dukungan langsung pada bagian blog, acara, portofolio, atau toko. Untuk menggunakannya di halaman-halaman ini, Anda perlu menambahkan bagian kosong di atas bagian yang tidak didukung dan menautkan jangkar ke bagian tersebut. Anda dapat membuatnya terlihat tepat dengan menonaktifkan Fill Screen di pengaturan bagian kosong tersebut. Jika tidak, Anda akan mendapatkan celah yang janggal di bagian atas halaman.

Tambahkan tombol kembali ke atas tanpa membuat Squarespace terlalu rumit

Jika Anda mencari cara termudah untuk menambahkan tombol-tombol ini tanpa mempersulit Squarespace Anda, widget tanpa kode adalah opsi yang paling cepat dan paling fleksibel. Misalnya, dengan Widget Kembali ke Atas dari Jotform, Anda dapat mendesain, menyematkan, dan memperbarui tanpa pernah menulis satu baris kode pun.

Kode kustom memberi Anda kontrol desain penuh, yang berguna jika Anda memiliki tujuan visual yang sangat spesifik. Fitur tautan jangkar bawaan adalah solusi yang baik, tetapi tidak memberi Anda kontrol sebanyak itu. Apa pun yang Anda pilih, sesuaikan metodenya dengan kebutuhan situs Anda dan jangan berlebihan dalam membangunnya.

Coba Widget Kembali ke Atas hari ini untuk menambahkan tombol gulir ke atas yang rapi ke situs Squarespace Anda dalam hitungan menit. Dan jika Anda sudah menggunakan Jotform untuk formulir Squarespace, alur penyematannya akan terasa familier sejak klik pertama.