Back To top and Go To Down Button With CSS & jQuery

Cara Membuat Tombol Back To Top dan Go To Down Dengan CSS dan efek jQuery

 Back to top and go to down button - Ketika anda membaca sebuah artikel yang panjang, saya yakin anda malas untuk men scroll kebawah ataupun ke atas. Tapi bagaimana jika hanya dengan sekali klik maka anda akan langsung "meluncur ke atas" dan "terjun ke bawah" ? Ini biasa disebut dengan back to top and go to down button .

Kali ini saya akan membuatnya beda, yaitu dengan penambahan jQuery + CSS . Penasaran ? Simak terus kang :)

 Tombol ini bisa langsung anda tambahkan ke blog anda, lewat menu Template -> Edit HTML . Tanpa harus " Add a gadget " .





 Hal pertama yang harus anda perhatikan sebelum menambahkan tombol ini kedalam blog, pastikan sudah ada script jQuery di template blog. Jika belum silakan taruh kode ini diatas</head>

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

Cara Membuat Tombol Back To Top dan Go To Down Dengan CSS dan efek jQuery

1. Pastikan anda sudah login ke blogger.com
2. Salin kode berikut diatas kode ]]</b:skin>

/* Up and Down Buttons with jQuery From Newbanieblogspotcom */

.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/AVvXsEgFcLgeCcNJP6C1pW6MJK3aIe8iV_fnkU_nDFvl_F6C1oLSx4oGbLpI5tJGTeh0VQk5HzuxrLHV-Hz5Vpl55T6n4N7HrlsLiNbJQsYiGJeF3oYdVnruoQg2Ta10iFc22o5R5cT0fuB5Olw/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/AVvXsEju_3ZCMiVeLGiCt1yO5SklLDBGYaPxhhZcTCGBTUb807DNjw6LdreUQ0X4cdkDP9p_iDLVLwSLne0E8SIgbu0TOG93JRW7IMnbWqXS_VBFWzXTBfnL6cyn4qGTRo6MDtRYtPznkzzxWco/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);

}

3. Setelah itu cari kode </body> , letakkan kode berkut keatasnya

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

Simpan template!

Tweet