Rabu, 13 April 2011

Scroll or Back to Top Simple jQuery

Tutorial mengenai blogger sekarang benar² sulit. Tidak tau Beben Koben si bloglang anu ganteng kalem tea yang sudah kehabisan ide, ngebloglang kesana kemari masih itu-itu juga artikelnya, mo bikin sendiri tut's enggak bisa sob ;)) :"> Terpaksa mengangkat kembali tema yg lawas guna mempertahankan eksistensi berpsoting :D Scroll back to top nih sob, tombol dimana berfungsi untuk kembali ke atas hanya dengan sekali pencet. For back to top and bottom pernah dibahas scroll to top and bottom with jQuery. Dikarenakan banyak trik scroll to top ini, maka dipilih satu yang simpel, gaya, dan mudah pemakaiaannya ;)

Datang dari web designer keren top markotop WebDesignerWall Beben comot artikel back to top. Script jQuery simpel, CSS maknyus, and yg tidak kalah penting gambar arah panah keatas akan tetap tidak kelihatan jika tidak di scroll kebawah :-"

Setelah beres didownload bumbu²nya silahkan ekstrak lalu buka. Gambar panah hosting terlebih dulu. Lalu mari kita masuk sesi pemasukan ke template blog sobat :)

CSS Coded

/* Back to top button */
#back-top {
position: fixed;
bottom: 5px;
right: 5px;
}
#back-top a {
width: 50px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #bbb;
}
#back-top a:hover {
color: #f00;
}
/* arrow icon (span tag) */
#back-top span {
width: 50px;
height: 65px;
display: block;
margin-bottom: 5px;
background: #ddd url(http://GAMBAR-PANAH-KE-ATAS.PNG) no-repeat center center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#back-top a:hover span {
background-color: #555;
}
Letakin diatas kode </b:skin>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 700);
return false;
});
});

});
//]]>
</script>
Letakkan diatas/sebelum kode tag penutup </body>

Kode HTML

<div id="back-top"><a href="#top"><span></span>Back to Top</a></div>
Masukin didalam tag <body> asalkan jangan bentrok dengan tag penutup yang lainnya :-?

Save

Good luck... Original article: Animated Scroll to Top.
Happy scroll or back to top \m/
Diposting oleh di
Label: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)