Scrolling Top and Down with jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Scrolling Top and Down with jQuery atau Membuat animasi halaman scroll menggunakan jQuery. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Letak tombolnya berada di pojok kanan bawah

demo

Back to Top and Down dengan Jquery

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Scroll */
#down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url('http://i766.photobucket.com/albums/xx310/Ikhfar/th_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://i766.photobucket.com/albums/xx310/Ikhfar/th_top-1.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. Paste di atas kode

</b:skin>

6. Masukkan framework jQuery ke dalam template.
   Ingat bila sudah terdapat framework jQuery, JANGAN copy kode ini

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

7. Jika belum mempunyai framework jQuery, maka copy framework tersebut di atas kode

</head>

atau di bawah kode

</b:skin>

8. Setelah itu copy kode di bawah ini

<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>

9. Paste kode tadi di atas kode

</body>

10. Simpan template

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait