Cara menginstal tombol "Kembali ke Atas" dengan pengguliran yang halus
KEMBALI KE ATAS
Peran dan fungsi tombol back to top itu sendiri cukup penting sehingga memudahkan pengunjung yang ingin kembali ke atas halaman mengscroll hanya dengan mengklik tombol. Catatan: Jika templat yang ada kembali ke tombol atas, harap hapus dulu.
Jadi mari kita mulai dan menyelesaikan dengan sangat cepat:
Masuk ke Blogger, lalu klik Edit HTML, simpan kode berikut setelah tag <head> atau sebelum </head>.
<tautan href = '// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel = 'stylesheet' />
Jika fontawesome sudah ditambahkan di template Anda maka abaikan saja.
2 - Simpan css di bawah ini sebelum]]> </ b: skin> atau </style> CSS
.smoothscroll-top {
position: fixed;
opacity: 0;
visibilitas: tersembunyi;
overflow: disembunyikan;
perataan teks: tengah;
z-indeks: 99;
warna latar: # 2ba6e1;
warna: #fff;
lebar: 47px;
tinggi: 44px;
garis-tinggi: 44px;
kanan: 25px;
bawah: -25px;
padding-top: 2px;
batas-radius: 5px;
transisi: semua kemudahan 0,5-in;
transisi-delay: 0,2s;
}
.smoothscroll-top: hover {
background-color: # 3eb2ea;
warna: #fff;
transisi: semua 0,2s kemudahan masuk;
transisi-delay: 0s;
}
.smoothscroll-top.show {
visibilitas: terlihat;
kursor: pointer;
opacity: 1;
bawah: 25px;
}
.smoothscroll-top i.fa {
line-height: inherit;
}
3 - Simpan JQuery dan HTML di bawah ini sebelum </body> Tag
function scrollToTop () { verticalOffset = typeof (verticalOffset)! = 'tidak terdefinisi'? verticalOffset: 0;
element = $ ('body');
offset = element.offset ();
offsetTop = offset.top;
$ ('html, body'). animate ({scrollTop: offsetTop}, 600, 'linear'). animate ({scrollTop: 25}, 200) .animate ({scrollTop: 0}, 150) .animate ({scrollTop : 0}, 50);
}
//]]>
</script>
Ini dia ... Cukup tambahkan kode ini dan hanya itu. Jika Anda memiliki masalah, tinggalkan komentar. Jika Anda suka, silakan Suka, bagikan, dll ...
Tidak ada komentar: