Sabtu, 03 September 2011

Cara Membuat Back To Top Dengan Jquery

Kali ini saya akan membahas mengenai Cara Membuat Back To Top Dengan Jquery, saya akan berusaha update blog ini agar terlihat lebih fresh, kalau ada yang mau nulis disini akan saya beri kesempatan, walaupun blog ini sebenarnya sepi pengunjung karena kurangnya SEO dan Blogwallking. Untuk kali ini saya akan share ajja, Cara Membuat Back To Top Dengan Jquery pada Blogsot. untuk langkahnya anda langsung menuju ke TKP :
  • Login Ke Blogger
  • MAsuk ke Rancangan --> Tata Letak --> Add Widget --> Html/Javascript.
  • Kemudian masukkan kode berikut :
<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500);
});
}
}, 100);
});
});
</script>

Ganti kode yang bercetak tebal sesuai dengan keinginan anda
Kemudian Save.

Dan lihatlah hasilnya, blog anda akan terlihat lebih menarik dan keren dengan Back to top Jquery.

Tidak ada komentar:

Posting Komentar