jQuery dan Efek Scrolling

Ini adalah kumpulan snippet javascript yang biasa saya gunakan pada proyek-proyek web. Ada beberapa efek seperti ini tanpa perlu menggunakan plugin.

Catatan: Artikel ini akan terus saya update yah…

Smooth Scrolling

Jika anda memiliki website dan ingin memiliki scroll ‘halus’ dalam halaman (Anchor name). Mungkin script ini dapat membantu anda :

jQuery('a[href*=#]:not([href=#])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
     var target = jQuery(this.hash);
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         jQuery('html,body').animate({
              scrollTop: target.offset().top
              }, 1000);
         return false;
       }
     }
 });

Sudah, tidak perlu plugin tambahan, tidak perlu coding tambahan, cukup gunakan <a name=”#top”> sebagai tujuan, dan untuk link gunakan <a href=”#top”>

Tambah CSS Class saat Scrolling di posisi tertentu

Efek ini biasanya digunakan pada menu, contohnya jika anda ingin background suatu menu berubah saat halaman sudah scroll diposisi tertentu… ini contoh scriptnya:

var header = jQuery(".headwrapper");
 jQuery(window).scroll(function() {
     var scroll = jQuery(window).scrollTop();
     if (scroll >= 5) {
        header.removeClass('withoutBg').addClass("withBg");
     } else {
        header.removeClass("withBg").addClass('withoutBg');
     }
 });

ganti ‘.headerwrapper’ dengan class/ID target anda…