Back to Top dengan Efek JQuery - Hallo sahabat Affiliate Marketing, Pada Artikel yang anda baca kali ini dengan judul Back to Top dengan Efek JQuery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel CSS, Artikel HTML, Artikel JQuery, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Back to Top dengan Efek JQuery
link : Back to Top dengan Efek JQuery

Back to Top dengan Efek JQuery

Kadang kita sering melupakan tool kecil (back to top) yang dianggap sepele tapi sebenarnya sangat berperan banyak, terutama untuk postingan yang panjang kita tidak usah lagi mengulirkan mouse atau scroll ke bagian atas.

Dengan widget kecil ini semua masalah diatasi dengan mudah, disini saya akan mencoba share widget tersebut dengan sentuhan lembut (smooth scroll) yaitu Back To Top dengan Efek JQuery.

Bagaimana cara memasang di blog, ikutilah cara membuatnya di bawah ini:

1. Silahkan login di Blogger. Pilih Template > Edit HTML > klik Expand Widget Template
   Cari kode ]]></b:skin>  (gunakan CTRL+F)
   Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin> 
  

/* Back to Top dengan Efek 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/AVvXsEiM1q3FlKEmWWp7XtFf5-ZjFTy_j_40CaC4rV5rfbN7Ke_2zbEtNXkUCzRX-pj99icjDj0R6KMC0DKaG6Av3fWnbOXhex-KZrXsZRUxq9velarGuoS14aRT65gVi5YRYhzXoZpWLLjxxLI/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/AVvXsEjHVexaNgspEqNGo_pDj3dhxKtmXH8BBkvSPdFGyTogWOke2XaecbU6UHhXYrbASd9Ifpda4BQ2pyk2WkpRt5zRd6tobaMaJtDZJdnLw4YD9hBkBStB6S_3hbvAa1SWgcEVKwssw1LbZL0/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);
}

2. Kemudian cari kode </body>
   Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah 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>

3. Terakhir simpan template sobat dan tombol back to top sudah
   bisa dipakai

Catatan :

Jika scrip dibawah ini sudah ada

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

tidak usah dipasang lagi

Demikianlah Artikel Back to Top dengan Efek JQuery

Sekianlah artikel Back to Top dengan Efek JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Back to Top dengan Efek JQuery dengan alamat link https://sugengwawa.blogspot.com/2013/08/back-to-top-dengan-efek-jquery.html