Selasa, 17 Januari 2012

Cara Membuat Back To Top Dengan Jquery


Kali ini saya akan membahas mengenai Cara Membuat Back To Top Dengan JqueryCara 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 berwarna merah sesuai dengan keinginan anda
Kemudian Save.

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

0 komentar:

Posting Komentar