Back to Top atau kembali ke Atas dan ke Bawah

Membuat Back To Top sudah banyak ditulis oleh para blogger dan banyak cara di gunakan dan salah satunya menggunakan jQuery.

Back to top memudahkan kita atau para pengunjung blog untuk kembali ke halaman atas.


Cara membuatnya
1. Yang pertama buka Blogger >>Design >>Edit HTML
2. Langkah selanjutnya copy kod css dibawah ini dan letak tepat diatasnya kod ]]></b:skin>

#bawah {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:55px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

#atas {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:15px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

3.Langkah selanjutnya copy kod javascript dibawah ini dan letak tepat diatasnya kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>


4. Dan langkah terkahir klik simpan dan lihat hasilnya