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>

---

Post By : denzdii