Cara Membuat Butang 'Scroll-to-Top' Menggunakan JavaScript dan jQuery

Butang 'tatal ke atas' digunakan untuk mengembalikan pandangan anda ke bahagian atas halaman dengan mudah. Ciri UX kecil ini sangat biasa di laman web moden. Sangat berguna untuk laman web yang mempunyai banyak kandungan, seperti aplikasi satu halaman.

cara log keluar dari mel di mac

Dalam artikel ini, anda akan belajar bagaimana membuat butang tatal ke atas menggunakan JavaScript dan jQuery.

---

---

Cara Membuat Butang Tatal ke Atas Menggunakan JavaScript

Anda boleh menambahkan butang tatal ke atas ke laman web anda menggunakan coretan kod berikut:

Kod HTML

Scroll-to-Top button using JavaScript

Scroll down the page

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

---

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

Di sini, struktur asas laman web dibuat dengan data palsu. Anda hanya perlu fokus pada butang tatal ke atas.

---

---

Apabila butang ini diklik, halaman ditatal ke bahagian atas. Ini akan berfungsi setelah menambahkan kod jQuery.

Kod jQuery

Berkaitan: Ketahui Cara Membuat Elemen di jQuery

// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});

Di sini, tunjuk kelas ditambahkan ke elemen butang jika pengguna menatal lebih dari 300 piksel di laman web. Ini tunjuk kelas menjadikan elemen butang kelihatan. Secara lalai, keterlihatan elemen butang disembunyikan. Maklumat lebih lanjut mengenai butang terdapat dalam kod CSS berikut.

Kod CSS

Berkaitan: Contoh Kod CSS Ringkas yang Anda Boleh Pelajari dalam 10 Minit

#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}

CSS di atas digunakan untuk menggayakan butang tatal ke atas dan laman web. Anda boleh bermain dengan kod CSS dan menggayakan butang mengikut keperluan anda.

Kini anda mempunyai butang tatal-ke-atas / belakang-ke-atas yang berfungsi sepenuhnya. Sekiranya anda ingin melihat kod sumber lengkap yang digunakan dalam artikel ini, berikut ini Repositori GitHub yang sama.

Catatan : Kod yang digunakan dalam artikel ini adalah MIT Berlesen .

Ketahui Lebih Lanjut Mengenai Pengalaman Pengguna

Pengalaman pengguna memberi tumpuan kepada sama ada produk memenuhi keperluan penggunanya. Sekiranya anda seorang pereka atau pembangun, anda harus mengikuti prinsip reka bentuk UX dan membuat produk hebat. Sekiranya bidang ini menarik minat anda, anda mesti mengikuti jalan yang betul untuk memulakan.

cara mengesan malware di iphone

Berkongsi Berkongsi Tweet E-mel Ingin Menjadi Pereka UX? Inilah Cara Bermula

Tugas Pereka UX adalah untuk memastikan bahawa keperluan pengguna perisian dijaga, dan mereka senang dalam prosesnya.

Baca Seterusnya Topik-topik yang berkaitan

• Pengaturcaraan
• JavaScript
• jQuery

Mengenai Pengarang Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah pelajar sarjana Sains Komputer di University of Delhi, India. Dia meminati Pembangunan Web Stack Penuh. Ketika dia tidak menulis, dia meneroka kedalaman teknologi yang berbeza.

Lagi Dari Yuvraj Chandra

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan