Adding a floating back to top button for blogger using Jquery
Pada post yang lepas,anda telah belajar mengenai Adding a floating back to top button for blogger .
Kali ini saya akan menunjukkan cara Add floating back to top menggunakan Jquery.
Contoh back to top ini anda boleh lihat di sebelah kiri bawah blog saya.Setelah anda scroll kebawah,akan muncul Scroll to Top.
Simply login ke account Blogspot anda then masuk ke Design , Edit HTML dan click Expand Widgets Templates.Selepas itu , tekan CTRL+F dan taip </body>
Copy dan pastekan code dibawah in di atas </body>
Copy dan pastekan code dibawah in di atas </body>
<style type='text/css'>
#toTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;left:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#toTop").scrollToTop();
});
</script>
<a href='#' id='toTop' style='display:none;'>Scroll to Top </a>
Anda boleh edit pada code berwarna merah.Sama anda ingin ia terletak di sebelah kiri atau kanan perkataan Scroll to Top
Credit to Way2Blogging
Comments