Membuat Scroll Smooth Halaman Blog

Membuat Scroll Smooth Halaman Blog
Scroll smoth halaman yang kali ini saya share adalah scroll yang menargetan suatu halaman pada sebuah posting blog dengan target url tanpa harus menggunakan scroll browser atau yang biasa kita gunakan dengan scroll mouse. nah dari cara ini kita akan menggunakan beberapa script halus dan penambahan scroll to top jika postingan kita panjang.
Lihat Demo
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script>
  $(function () {

    function filterPath(string) {
      return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

   //Setiap link dengan tag hash di dalamnya (tidak bisa melakukan ^ = karena potensi URL yang memenuhi syarat)
    $('a[href*=#]').each(function () {

      // Pastikan itu adalah link yang sama-halaman
      var thisPath = filterPath(this.pathname) || locationPath;
      if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {

        // Pastikan target
        var $target = $(this.hash),
          target = this.hash;
        if (target) {

          // Cari lokasi dari target
          var targetOffset = $target.offset().top;
          $(this).click(function (event) {

            // Mencegah jump-down
            event.preventDefault();

            // Animate untuk menargetkan
            $(scrollElem).animate({
              scrollTop: targetOffset
            }, 400, function () {

              // Set hash URL setelah animasi sukses
              location.hash = target;

            });
          });
        }
      }

    });

    // Gunakan elemen pertama yaitu "scrollable" (cross-browser memperbaiki?)
    function scrollableElement(els) {
      for (var i = 0, argLength = arguments.length; i < argLength; i++) {
        var el = arguments[i],
          $scrollElement = $(el);
        if ($scrollElement.scrollTop() > 0) {
          return el;
        } else {
          $scrollElement.scrollTop(1);
          var isScrollable = $scrollElement.scrollTop() > 0;
          $scrollElement.scrollTop(0);
          if (isScrollable) {
            return el;
          }
        }
      }
      return [];
    }

  });
</script>
Keterangan Kontribusi dengan HTML yang menentukan penargetan URL dan ID.
<ul>
    <li><a href="#two">Scroll Ke Halaman 2</a></li>
    <li><a href="#three">Scroll Ke Halaman 3</a></li>
</ul>
Di atas url target harus sama dengan halaman target yang di tandai dengan target ID.
Ket :
no 2 menargetkant scroll unuk menuju pada halaman 2 dengan url target #two.
no 2 menargetkant scroll unuk menuju pada halaman 3 dengan url target #three.
<h1 id="two">Halaman 2</h1>
<p><a href="#top">Top</a></p>
Ket :
no 1 menandakan ID untuk kembali pada menu halaman dengan target #two yang sama.
no 2 menandakan untuk kembali ke atas.
Jika keseluruhan HTML di gabung maka akan menghasilkan seperti HTML di bawah.
        <ul>
          <li><a href="#two">Scroll Ke Halaman 2</a></li>
          <li><a href="#three">Scroll Ke Halaman 3</a></li>
        </ul>
        
        <h1 id="one">Halaman 1</h1>
        
        <p> ........ Kalimat atau isi postingan blog ........... </p>
        
        <h1 id="two">Halaman 2</h1>
        
        <p><a href="#top">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>
        
        <h1 id="three">Halaman 3</h1>
        
        <p><a href="#top">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>

license by under 88 blogspot.com
Post By : denzdii

5 comments:

  1. Pertamaxx kang.. keren ni blognya :D
    ijin belajar yah

    ReplyDelete
    Replies
    1. selamat pertamaxnya boz :-d .. iia mari kita sama2 belajar..

      Delete
  2. Pernah baca. Ini versi Scroller URL lokal, jadi lebih aman, dan sebenarnya tidak perlu menentukan ID atau kelas pada tautan. JQuery di atas akan secara otomatis menyeleksi semua tautan dengan nilai href lokal.

    ReplyDelete
    Replies
    1. ia mas taufik.. tutorialnya hanya untuk memudahkan pembaca tanpa harus mengedit apa yang di tulis. dan intinya hanya menyesuaikan penargetan yang sama. contohnya pada ID dan Href tersebut..

      Delete
  3. Mas, saya buat Javascript diatas 'HTML pentup head' tapi napa terjadi kesalahan Mas, gag bisa ditterima?

    Dibut dimn Javascriptnya Mas??

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top