Scrolling Page Top and Down With JQuery Button

Category : Labels: , ,

Top and Down Button
Ini adalah sebuah jalan untuk memudahkan pengunjung atau pembaca untuk me-scroll halaman weblog anda keatas dan kebawah dengan sangat mudah. Kita tinggal mengklik tombol ke atas untuk menscroll halaman ke atas, begitu juga sebaliknya.

  • Seperti biasa kita masuk dalam mode Edit HTML template blogspot anda.
  • Login kedalam dashboard anda ► LayoutEdit HTML
  • Centang kotak kecil "Expand Templates Widget"
  • Cari kode ]]></b:skin> dan copy-paste kode di bawah ini di atas kode ]]></b:skin> 
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://1.bp.blogspot.com/_9YclB8eEa7s/S0W9NsyPKsI/AAAAAAAAAkY/5gbJxUX5Vm0/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://1.bp.blogspot.com/_9YclB8eEa7s/S0W9RUBQZYI/AAAAAAAAAkg/Dyr3ioJ4aLk/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

  • Setelah itu cari kode </body> dan copy -paste kode di bawah ini di atas atau sebelum kode </body>
<div style="display:none;" class="nav_up" id="nav_up"></div>
<div style="display:none;" class="nav_down" id="nav_down"></div>
      
<script src="http://oemar.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://oemar.googlecode.com/files/scroll-startstop.events.jquery.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});                $(window).bind('scrollstop', function(){
                    $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
                $('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

  • Terakhir Save Templates anda.
Thanks to Carpe Diem

13 Komentar:

nice info sob...seperti punya saya ya ! eunak ke atas bawahnya

@ Kakve : Lumayan berat juga sich.. tapi bagi yang mementingkan style.. tidak apa -apa kayaknya... hehe :D
@ Mastergomaster : Iya kali.. hehe.. :D thanks yach..

hm..kalau berat sich mendingan ga usah aja...

buat style boleh juga tuh, mantab kawan...

@ Heri : Ehmm.. ya begitulah konsekuensinya..
@ gons : ya.. :D
@ Citago : walah..

ini sebenarnya yg aq cari tp scriptnya kok panjang bgt yah, ok dehtak coba dulu

lapor g berhasil alias cuma bisa keatas, kebawah g bisa

Surabaya HotelsIndonesia's

Kayaknya keren juga tuh...

tp diblog saya udah berat, mungkin kalo ditambah itu jadi tambah berat kali ya....

@ Rizky : untuk permasalahan itu.. langsung saja menuju ke asal pembuatnya.. linknya sudah ada tuh.
@ Birthday : thanks sudah berkunjung dan komentar :)
@ Facechan : hehe.. iya mungkin.. soalnya ini pakai javascript..

Post a Comment