Setelah sukses mengeset ukuran elemen menurut ukuran layar, kini yaitu saatnya untuk membuat pengaruh smooth scrolling pada halaman. Saya memakai plugin jQuery scrollTo untuk mempermudah pengerjaan. Ya, itu benar, alasannya yaitu cukup dengan plugin tersebut, membuat pengaruh smooth scrolling sanggup dilakukan hanya dengan menuliskannya menyerupai ini:
$('a').click(function() { $('html, body').scrollTo($(this).attr('href'), 1000); return false; });HTML
Buat sebuah berkas HTML dimana jQuery, jQuery scrollTo dan CSS eksternal telah disertakan di dalamnya:
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Demo</title> <link rel='stylesheet' href='style.css'> <script src='jquery-1.7.1.min.js'></script> <script src='scrollTo.js'></script> <script> $(function() { // Pekerjaan kita di sini... }); </script> </head> <body> <!-- halaman --> <div id='wrap'> <div class='box' id='home'> <h3>Home</h3> </div> <div class='box' id='contact'> <h3>Contact</h3> </div> <div class='box' id='fun'> <h3>For Fun</h3> </div> <div class='box' id='about'> <h3>About</h3> </div> <div class='box' id='website'> <h3>Website</h3> </div> <div class='box' id='skill'> <h3>Skills</h3> </div> </div> <!-- navigasi --> <ul id='nav'> <li><a class='active' href='#home'>Home</a></li> <li><a href='#website'>Website</a></li> <li><a href='#fun'>For Fun</a></li> <li><a href='#about'>About</a></li> <li><a href='#skill'>Skills</a></li> <li><a href='#contact'>Contact</a></li> </ul> </body> </html>Penerapan jQuery ScrollTo
Melanjutkan dari instruksi pada tutorial sebelumnya, di sini Saya telah mengubah script ini:
$('#nav a').click(function() { $('#nav a.active').removeClass('active'); $(this).addClass('active'); });Menjadi menyerupai ini untuk menjalankan animasi .scrollTo():
$('#nav a').click(function() { $('#nav a.active').removeClass('active'); $(this).addClass('active'); $('html, body').scrollTo($(this).attr('href'), 1000); return false; });Lebih Lengkap:
$(function() { // Hilangkan scrollbar $('html, body').css('overflow', 'hidden'); function updateSize() { var winWidth = $(window).width(), winHeight = $(window).height(), wrapSum = $('.box').siblings().length; $('#wrap').css({ width:winWidth*(wrapSum/2), height:winHeight*(wrapSum/3) }); $('.box').css({ width:winWidth, height:winHeight }); } updateSize(); $(window).resize(function() { updateSize(); }); // Gunakan plugin jQuery scrollTo untuk membuat pengaruh smooth scrolling $('#nav a').click(function() { $('a.active').removeClass('active'); $(this).addClass('active'); $('html, body').scrollTo($(this).attr('href'), 1000); // Cegah link mengakses halaman dari atributnya return false; }); });Tanpa plugin scrollTo, sajian masih sanggup berfungsi dengan baik untuk meloncatkan halaman/seksi pada pandangan user dengan tepat. Hanya saja, pengaruh animasi tidak akan terjadi. Saya tidak tahu banyak mengenai Mootools. Tapi pada intinya, Mootools dan jQuery yaitu dua konsep yang sama:
Mootools = JavaScript Library = jQuery