Cara membuat tombol Naik dan Turun menggunakan efek slide jQuery

Tombol Atas dan Bawah ini dapat digunakan untuk menavigasi ke atas dan bawah dari konten halaman, terutama ketika pada halaman utama ada banyak artikel atau ketika sebuah artikel memiliki terlalu banyak komentar. Tombol-tombol ini memiliki fadeIn dan efek fadeOut, memiliki fungsi naik / turun blog.

Step 1. Masuk ke Template, klik Edit HTML

Step 2. Cari kode:

 ]]></b:skin>

Step 4. Paste kode ini tepat di atas :

 /* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mvcYprKRpua6GDpUwKA3kqz04Zy5Yc84IHBLPcSgpdPu2FS77OOqqAx8alLtHAGoU1KXyeyBfdxR1K51BrJkztjUnpyQVn9QqBb7XAvjzItZ9wVVLKNfWi6Rx1mwzDhlNr0V90QnQn4/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzaVbprSa847StT3p5iIBlquNz2NG45D0MiAHqF-6GcdMl4KQyHP50FKMX996Qb6x_tj4NMRnVjNXHhnF29TyV6uCt8XitxL_uqnTM1daUiG06uuEo-xRLyGJUcBgqoop6i-LeXYEcGM/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Catatan:

1. Untuk merubah ukuran dan posisi, ganti kode berwarna merah sesuai keinginan anda.
2. Jika ingin mengganti gambar up dan down dengan gambar yang anda sukai, ganti kode atau url gambar yang berwana biru.

Step 5. Cari kode :

 </body>

Step 6. Paste kode berikut tepat di atas kode </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Step 7. Simpan Template!

Tweet