Home » » Cara mudah membuat tombol Back To Top dengan smooth scrolling

Cara mudah membuat tombol Back To Top dengan smooth scrolling

Written By Warin Ahmad on Monday, July 14, 2014 | 4:49 AM

Beberapa langkah untuk membuat tombol back to top pada blogger dengan smooth scrolling:

#1:
Masuk ke akun Blogger, kemudian masuk pada bagian Tata Letak atau Layout. Setalah itu klik Tambahkan Gadget atau Add a Gadget.

#2:
Kemudian pilih HTML/JavaScript.







#3:
Setelah ditambahkan, akan muncul seperti gambar berikut.

Kemudian copy paste sintak berikut pada bagian Konten:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script>jQuery(document).ready(function() {var offset = 220;var duration = 500;jQuery(window).scroll(function() {if (jQuery(this).scrollTop() > offset) {jQuery('.back-to-top').fadeIn(duration);} else {jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script>
<style>div#page {max-width: 900px;margin-left: auto;margin-right: auto;}
.back-to-top {position: fixed;bottom: 2em;right: 1em;text-decoration: none;display: none;}
.back-to-top:hover {opacity: 0.7;text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-64.png"/></a>
Untuk pada bagian warna merah dapat diganti dengan link gambar sesuai selera.
Selesai, selamat mencoba.
Sumber : http://www.gumdi.com/

0 comments:

Post a Comment