Membuat Back To Top Dengan JQurey Penambahan Efek fade in dan out

Home > JavaScript Blogger > Membuat Back To Top Dengan JQurey Penambahan Efek fade in dan out

Silahkan lihat contohnya Disini

Masukan kode JQuery Library:

Jika sudah ada tidak perlu lagi !!!

Masukan kode css berikut :

Masukan kode JQuery berikut :

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

});

});
//]]>
</script>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
  min: 1,
  fadeSpeed: 200
 }, settings);
 return this.each(function() {
  var el = $(this);
  el.hide(); 
  $(window).scroll(function() {
   if($(window).scrollTop() >= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $('#top-link').topLink({
  min: 300,
  fadeSpeed: 500
 });
 $('#top-link').click(function(e) {
  e.preventDefault();
  $.scrollTo(0,300);
 });
});
</script>

Masukan kode HTML berikut :

Dan cari kode <body> ganti dengan <body id='top'>.

Semoga Bermanfaat...

Alhamdulillah

3 comments:

Nano Yulianto

lihat dihalaman dibawah bro...

http://nanoyulianto.blogspot.com/2010/10/penempatan-kode-css-javascript-dan-html.html
17/1/11

rey

tutorialnya sangat jelas dan tapi yang masih aku bingung adalah kalimat ini:
Dan cari kode <body> ganti dengan <body id='top'>. sebab ditemplateku kodenya laen
18/1/11

Nano

tag <body> adalah strukture yang wajib dalam XHTML. Semua HTML pasti ditempatkan di dalam Tag <body> untuk merubah menjadi tampilan yang kita lihat ini...

saya lihat bro rey memakai template terbaru dari Blogger, dan ada kok tag <body> ditemplate bro rey, tercantum seperti ini :
<body class="">

Tutorial Nano Yulianto

I am Blogger and Love Design

Membuat Back To Top Dengan JQurey Penambahan Efek fade in dan out

3 comments:

Posting Komentar