Membuat Tombol Scrolling Top Down Dengan Jquery

Kali ini saya soba berbagi tentang cara membuat tombol scrolling top dan down dengan sentuhan jquery. sehingga ketika tombol page top down diklik akan tercipta pergerakan halaman blog yang lebih  halus dan atraktif.untuk mencobanya sobat bisa klik tombol Page Top Down  yang ada di kanan bawah halaman ini.

Nah jika sudah mencobanya,sekarang kita lanjutkan dengan cara pembuatannya,Bagaimana caranya? ikuti langkah berikut :

1. Masuk ke akun blogger sobat

2. Klik rancangan, kemudian Edit HTML

3. Pada Edit HTML, centang Expand Template Widget

4. Cari kode ]]></b:skin>, jika sudah ketemu taruh kode dibawah ini diatas kode ]]></b:skin>

/* Begin Scroll */
#down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url('http://2.bp.blogspot.com/-
eH8pG702o2U/UIgb0x3FzUI/AAAAAAAADLc/OQ5xtaBszQk/ s1600/down.png')no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:50px;
white-space:nowrap;
cursor:pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#top{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url('http://2.bp.blogspot.com/-l6kLsMCNcvg/ UIgb2Jb-
BkI/AAAAAAAADLk/pcHHDFufgn0/s1600/top.png') no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:10px;
white-space:nowrap;
cursor:pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
/* End Scroll */

5. Selanjutnya taruh kode dibawah ini i atas kode </head> atau di bawah kode </b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Catatan :
Jika pada tempalte sobat sudah terdapat framework jQuery maka lewati saja langkah no 5.

6. Selajutnya cari kode </body> dan taruh kode dibawah diatas  </body>

<div class='top' id='top' style='display:none;'/>
<div class='down' id='down' style='display:none;'/>
<script text='text/javascript'>
$(function() {
var $elem = $('#outer-wrapper');
$('#top').fadeIn('slow');
$('#down').fadeIn('slow');
$('#down').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 2000);});
$('#top').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 2000);});
});
</script>

7. Terakhir Simpan template sobat dan lihat hasilnya.

Selain cara diatas sobat bisa mencoba cara membuat tombol back to top satu arah ( hanya scrolling ke atas saja),panduannya bisa sobat lihat disini

Demikian cara membuat tombol csrolling Top Down dengan jquery semoga bermanfaat...