Back To Top Menarik Dengan CSS dan jQuery

Di posting kali ini taukahbahwa.blogspot.com akan membahas artikel tentang Back To Top Menarik Dengan CSS dan jQuery. Semoga dengan artikel Back To Top Menarik Dengan CSS dan jQuery akan menambah wacana untuk anda pembaca setia taukahbahwa.blogspot.com

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/AVvXsEiELsn5avdw0u8gVRVkld0xLrY45sp3S38IFr1T0w8zfdQRLru_9sHIbyEyVWYIBIbNZ56TYbv04V4LB7oCQqXlCZj5FGYFJwENoMXwLq28OoKtlscoSK9qxQ5eMDY3qYd0PKrauacRKuc/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/AVvXsEiu6rwnhbju8WUFgw-B-dQCpffEhpmOF4nUkPmy1YHEoC0aRuV-6NztWoYMbuTUZDRcX_hdgm9nGTaIJsmjUlqrIGMsrA9S7JbKOeckznMmzTGOO-oX3mCF_xAofy_SIK6WHZNy-LDsBEc/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.....

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com