Back To Top Menarik Dengan CSS dan jQuery

Diposkan oleh Imron fhatoniLabel: Tutorial Bloggerdi 18.14

Assalamualaikum Pada kesempatan ini saya akan share mengenai cara membuat tombol back to top dengan menggunakan css dan jQuery caranya cukup sederhana jadi mudah untuk diterapkan

nah jika tertarik lansung saja ikuti langkah dibawah ini

Masuk blog agan
pilih menu template/edit html
kemudian gunakan ctrl + f untuk menemukan kode  </body>
jika sudah ketemu letakan kode dibawah ini diatas tag  </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>

Catatan : silahkan hapus kode berwarna merah jika sebelumnya sudah ada di template anda

Selanjutnya gerakan kursor kebagian atas untuk menemukan kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-dS4ZMg1GUeuE2OQcOPFeB6MXqD8LH-ZAFaycEqkVvnqC9ak5fokTm2XShro8-V9aSBwlOCwsGXiuaC7JpqKnK8PFP7j66xhV1UumNnbiPJidwa0R-nlKaFlA9_xWwMSUOa3tFrkouY/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:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQMNv0i0UI_mvHikTIA-541sFxoGBPE4hL_NA6uhb2bS58v3Wh9VQZSMpgDLpmisDboGEyPvWrBCyvbQInr-bEvyVANN27Bhj2GXrxTLBCLulhcUV-VrQgHfYEtZFAs8Ct9TFraZ_Pn4/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);
}

Terakhir silahkan simpan template anda dan lihat hasinya
 selamat mencoba semoga bermanfaat.....

Penulis : Imron fhatoni Lokasi : NTB, SUMBAWA

Artikel Back To Top Menarik Dengan CSS dan jQuery, ditulis oleh Imron fhatoni. Semoga artikel ini dapat menambah wawasan Kita. Silahkan tinggalkan jejak pada form Komentar untuk mempermudah Imron fhatoni berkunjung kembali ke blog sobat.(Wassalam)

Share on Google Plus

About Unknown