Cara Menambahkan Tombol Back-to-Top yang Lengket ke Situs Web Anda

Diterbitkan: 2023-02-12

Kita semua pernah ke sana. Anda telah menemukan panduan online yang luar biasa, menggulir semuanya sampai ke bawah, dan kemudian berpikir, "Wow, saya ingin melihat apa lagi yang ditawarkan situs ini!"

Tapi kemudian Anda harus menggulir.

SEMUA.

ITU.

JALAN.

KE.

ITU.

ATAS.

Dan kemudian Anda berpikir…. “Hmmm, tidak apa-apa.” Dan tutup halamannya.

Sebagai perancang web, ini adalah hal terakhir yang Anda ingin seseorang lakukan ketika mereka membuka situs yang Anda buat. Untungnya, praktik terbaik desain web modern telah memberi kami solusi untuk masalah umum UX ini: tombol kembali ke atas yang lengket.

Apa itu Tombol Back-to-Top yang Lengket?

Juga dikenal sebagai tombol scroll-to-top atau gambar go-to-top, tombol back-to-top yang lengket adalah elemen navigasi berguna yang membantu pengguna kembali ke bagian atas halaman web yang sedang mereka lihat. Pola UI yang umum adalah menempatkan tombol ini di sudut kanan bawah layar, menjadikannya "lengket" melalui posisi tetap sehingga selalu dapat diakses saat pengguna menggulir halaman ke bawah.

Hal Yang Perlu Dipertimbangkan Sebelum Menambahkan Tombol Back-to-Top

Seperti tren desain populer lainnya, saya mendorong Anda untuk mengambil langkah mundur sebelum menerapkannya di situs Anda untuk bertanya pada diri sendiri: Jika saya akan membuat ini, pedoman tombol back-top apa yang harus saya ikuti?

Berikut adalah beberapa pertanyaan untuk dijawab sebelum Anda membuat tombol scroll-to-top:

  • Di mana itu akan ditempatkan?
  • Seberapa besar (atau kecil) seharusnya?
  • Pola desain apa yang harus Anda ikuti agar tetap sesuai dengan merek? (Pikirkan warna, font, ikon, dll.)
  • Apakah berisiko meliput konten situs penting, seperti informasi di sidebar?
  • Apa yang terjadi pada perangkat seluler? Apakah akan responsif?
  • Apakah Anda benar-benar membutuhkannya?*

*Catatan: Anda dapat membuat argumen bahwa pengguna saat ini dikondisikan untuk menggulir ke bawah (dan mencadangkan!) pada halaman, yang akan menghilangkan “kebutuhan” akan tombol kembali ke atas. Saran saya: Ujilah! Tambahkan acara Google Analytics saat diklik atau gunakan alat peta panas seperti Hotjar untuk melihat bagaimana pengunjung situs Anda terlibat dengan halaman tersebut.

“Praktik terbaik” terbaik untuk diikuti adalah berdasarkan data dari situs dan pengguna Anda sendiri!

Cara Menambahkan Tombol Back-to-Top yang Lengket ke Situs WordPress Anda

Dalam tutorial ini, saya akan menunjukkan cara menambahkan tombol back-to-top yang tepat yang kita gunakan di sini di Layout! Satu-satunya perbedaan adalah kami menempatkan milik kami di tajuk lengket di bagian atas layar, bukan di sudut kanan bawah. (Tapi jangan khawatir, konsepnya sama!)

Pro-tip: Meskipun tutorial ini tidak terlalu canggih, saya tetap menyarankan untuk mencobanya di situs pementasan atau lingkungan lokal, jadi sama sekali tidak ada risiko pada situs langsung Anda. Jika Anda perlu menyiapkannya dengan cepat, lihat Lokal, aplikasi WordPress lokal gratis yang sangat mudah digunakan.

Atau, lihat tutorial video ini untuk menambahkan tombol back-to-top yang lengket!

Lihat tombol Scroll-to-top Pen ES6 oleh Josh Lawler (@joshuamasen) di CodePen.

Untuk tutorial tombol back-to-top yang lengket ini, kami akan menggunakan tiga bahasa:

  • HTML untuk markup untuk membuat tombol
  • CSS untuk mengatur gaya tombol dan mencocokkannya dengan merek Anda
  • JavaScript untuk membuatnya "berfungsi" dan menentukan perilaku tombol

Di HTML, Anda akan menemukan baris berikut:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Kembali ke atas</span>
</a>

Ini akan menjadi tombol back-to-top Anda yang lengket! Anda dapat melihat bahwa kami telah menambahkan kelas CSS yang disebut .top-link , dan menggunakan beberapa JavaScript sederhana untuk "membuatnya berfungsi". Kami juga menggunakan SVG sebaris untuk tombolnya.

Selain SVG, Anda juga bisa menggunakan file gambar atau ikon font untuk membuat tombol. Namun, kami lebih memilih metode SVG karena:

  1. Itu tidak akan menjadi piksel pada ukuran layar yang berbeda, seperti gambar raster.
  2. SVG didukung secara universal di seluruh browser. (Yay, pengalaman pengguna!)
  3. Sangat mudah untuk ditata dengan CSS, sehingga Anda dapat mengubah segalanya dengan sangat mudah.
  4. Hanya membutuhkan satu baris kode, menjadikannya ringan dan lebih baik untuk kinerja situs.

Bagian terakhir yang sangat penting yang akan Anda temukan di HTML adalah baris ini:

 <span class="screen-reader-text">Kembali ke atas</span>

Ini sangat penting bagi pengguna yang mengoperasikan pembaca layar dan akan meningkatkan aksesibilitas situs WordPress Anda. (Anggap saja seperti alt tag untuk sebuah gambar, tetapi untuk tombol scroll-to-top Anda!)

Sekarang mari kita bicara lebih banyak tentang kelas CSS itu, .top-link . Kami menggunakan ini untuk benar-benar menata tombol, dan di situlah Anda akan menentukan kualitas seperti seberapa besar itu, berapa banyak padding yang harus ada di sekitarnya, warna, dll.

 .top-link {
  transisi: semua .25s ease-in-out;
  posisi: tetap;
  bawah: 0;
  kanan: 0;
  tampilan: inline-flex;
  
 kursor: penunjuk;
 menyelaraskan-item: tengah;
 justify-content: center;
 margin: 0 3em 3em 0;
 radius batas: 50%;
 bantalan: .25em;
 lebar: 80px;
 tinggi: 80px;
 warna latar belakang: #F8F8F8;

Catatan: Kami menggunakan Sass (bahasa stylesheet), untuk menulis CSS kami sedikit lebih cepat. Pelajari lebih lanjut tentang preprosesor ini di sini.

Beberapa bagian penting dari cuplikan ini: transition: all .25s ease-in-out ; mengontrol seberapa "cepat" tombol Anda akan muncul atau menghilang di layar, dan position: fixed ; adalah apa yang membuat tombol "menempel" ke lokasi yang Anda inginkan.

Selanjutnya, Anda akan melihat aturan untuk .show dan .hide . Kami akan menggunakan JavaScript untuk beralih di antara kelas-kelas ini untuk memberi tahu browser kapan tombol harus (atau tidak seharusnya) muncul di halaman.

 .menunjukkan {
    visibilitas: terlihat;
    opasitas: 1;
  }
  
  .bersembunyi {
    visibilitas: tersembunyi;
    opasitas: 0;
  }

Sebelum kita masuk ke JavaScript, ada beberapa baris lagi yang akan kita tambahkan ke CSS.

 svg {
 isi: #000;
 lebar: 24px;
 tinggi: 12px;
}
&: arahkan {
 warna latar belakang: #E8E8E8;
 	svg {
	 isi: #000000;
	}
}

Kelas-kelas ini akan mengatur gaya gambar SVG untuk panah itu sendiri dan memberi tahu browser cara menampilkan tombol saat pengguna mengarahkan kursor ke atasnya.

Terakhir, kami akan menambahkan beberapa CSS untuk menyembunyikan teks yang bertuliskan "kembali ke atas" untuk pembaca layar.

 // Teks dimaksudkan hanya untuk pembaca layar.
.layar-pembaca-teks {
	posisi: mutlak;
	jalur klip: sisipan (50%);
	margin: -1px;
	perbatasan: 0;
	bantalan: 0;
	lebar: 1px;
	tinggi: 1px;
	luapan: tersembunyi;
	bungkus kata: normal !penting;
	klip: rect(1px, 1px, 1px, 1px);
	&: fokus {
		tampilan: blok;
		atas: 5px;
		kiri: 5px;
		z-indeks: 100000; // Di atas bilah alat WP
		jalur klip: tidak ada;
		warna latar belakang: #eee;
		padding: 15px 23px 14px;
		lebar: otomatis;
		tinggi: otomatis;
		dekorasi teks: tidak ada;
		garis-tinggi: normal;
		warna: #444;
		ukuran font: 1em;
		klip: otomatis !penting;
	}
}

Sekarang ke JavaScript! Kami akan melakukan ini tanpa memuat jQuery, yang akan membantu menjaga kode Anda tetap ringan dan cepat dimuat.

Variabel pertama akan membantu browser menemukan tombol.

 // Tetapkan variabel untuk elemen tombol kita.
const scrollToTopButton = document.getElementById('js-top');

Selanjutnya, kita akan membuat fungsi yang menampilkan tombol scroll-to-top jika pengguna menggulir melampaui ketinggian jendela awal.

 const scrollFunc = () => {
  // Dapatkan nilai gulir saat ini
  biarkan y = jendela.scrollY;
  
  // Jika nilai gulir lebih besar dari tinggi jendela, mari tambahkan kelas ke tombol gulir ke atas untuk menampilkannya!
  jika (y > 0) {
    scrollToTopButton.className = "tampilkan tautan atas";
  } kalau tidak {
    scrollToTopButton.className = "sembunyikan tautan atas";
  }
};

Kami juga akan menambahkan pendengar acara, yang akan menonton saat pengguna menggulir (jadi kami tahu di mana mereka berada di halaman).

 window.addEventListener("gulir", scrollFunc);

Hampir selesai! Selanjutnya, kita perlu mendefinisikan fungsi yang membuat tombol benar-benar membawa pengguna kembali ke bagian atas halaman. Untuk melakukan itu, kami akan membuat variabel untuk jumlah piksel dari bagian atas halaman. Jika angka itu lebih besar dari 0, fungsi akan mengembalikannya ke 0, membawa kita ke atas!

Kami juga akan menambahkan sedikit animasi di sini, jadi lompatannya tidak terlalu mendadak.

 const scrollToTop = () => {
  // Mari kita atur variabel untuk jumlah piksel kita dari bagian atas dokumen.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // Jika angka itu lebih besar dari 0, kita akan menggulir kembali ke 0, atau bagian atas dokumen.
  // Kita juga akan menganimasikan scroll tersebut dengan requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  jika (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo mengambil koordinat x dan ay.
    // Naikkan nilai '10' untuk mendapatkan gulungan yang lebih mulus/lambat!
    jendela.scrollTo(0, c - c / 10);
  }
};

Last but not least, kita hanya perlu memberi tahu halaman untuk menjalankan fungsi itu ketika seseorang mengklik tombol back-to-top kita yang lengket.

 // Saat tombol diklik, jalankan fungsi ScrolltoTop kami di atas!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Itu dia! Anda sekarang akan memiliki tombol back-to-top lengket yang berfungsi penuh dan dapat disesuaikan di situs WordPress Anda.