Bagaimana cara menambahkan tombol back-to-top yang lengket ke situs web Anda

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

Tapi kemudian Anda harus menggulir.

SEMUA.

ITU.

CARA.

KE.

ITU.

ATAS.

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

Sebagai seorang desainer web, ini adalah hal terakhir yang Anda ingin seseorang lakukan ketika mereka mendarat di situs yang sedang Anda bangun. Untungnya, tahun ini 2019 dan praktik terbaik desain web modern telah memberi kami solusi untuk masalah UX umum ini: tombol back-to-top yang lengket.

Apa itu tombol back-to-top yang lengket?

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

Hal-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 membangun ini, pedoman tombol belakang apa yang harus saya ikuti?

*Catatan: Anda dapat membuat argumen bahwa pengguna saat ini dikondisikan untuk menggulir ke bawah (dan kembali ke atas!) pada halaman, yang akan menghilangkan "kebutuhan" untuk 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 yang didasarkan pada data dari situs dan pengguna Anda sendiri!

Bagaimana 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 header yang lengket di bagian atas layar, bukan di sudut kanan bawah. (Tapi jangan khawatir, ini konsep yang 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 untuk situs langsung Anda. Jika Anda perlu menyiapkannya dengan cepat, lihat Lokal, aplikasi WordPress lokal gratis yang sangat mudah digunakan.

Mari kita mulai! Saya akan menjelaskan setiap langkah prosesnya, dan Anda juga dapat mengikuti Codepen ini dari insinyur front-end Flywheel sendiri, Josh Masen.

Lihat tombol Gulir ke atas Pena ES6 oleh Josh Lawler (@joshumasen) 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="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</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 in-line untuk tombol.

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

1. Itu tidak akan menjadi pixelated pada ukuran layar yang berbeda, seperti gambar raster.
2. SVG didukung secara universal di seluruh browser. (Yay, pengalaman pengguna!)
3. Sangat mudah untuk menata gaya dengan CSS, sehingga Anda dapat mengubah segalanya dengan sangat mudah.
4. Hanya membutuhkan satu baris kode, sehingga 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">Back to top</span>

Ini sangat penting bagi pengguna yang beroperasi dengan pembaca layar, dan akan meningkatkan aksesibilitas situs WordPress Anda. (Anggap saja seperti tag alt untuk gambar, tetapi untuk tombol gulir ke atas 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, warnanya, dll.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Catatan: Kami menggunakan Sass (bahasa stylesheet), untuk menulis CSS kami sedikit lebih cepat. Pelajari lebih lanjut tentang praprosesor 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 ; inilah 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.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

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

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Kelas-kelas ini akan menyesuaikan 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 mengatakan "kembali ke atas" untuk pembaca layar.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

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.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

Selanjutnya, kita akan membuat fungsi yang menunjukkan tombol gulir ke atas jika pengguna menggulir melebihi ketinggian jendela awal.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", 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 kami 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, sehingga lompatannya tidak terlalu mendadak.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.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.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Berikutnya: Temukan 19 plugin WordPress yang disukai pengembang

Unduh ebook ini untuk daftar plugin yang paling kami rekomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.

Itu dia! Anda sekarang akan memiliki tombol back-to-top yang berfungsi penuh dan dapat disesuaikan di situs WordPress Anda. Untuk melihat seluruh tutorial dalam tindakan, ingatlah untuk memeriksa Codepen ini dari insinyur front-end Flywheel sendiri, Josh Masen!