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 ;)
Masukin didalam tag <body> asalkan jangan bentrok dengan tag penutup yang lainnya :-?
Happy scroll or back to top \m/
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>#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;
}
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>//<![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>
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/
Loading... |
4 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...