Tutorial Menghaluskan Scroll pada Halaman Blog

Sedikit Info Seputar Tutorial Menghaluskan Scroll pada Halaman Blog Terbaru 2017 - Hay gaes kali ini team Serba Neka Android, kali ini akan membahas artikel dengan judul Tutorial Menghaluskan Scroll pada Halaman Blog, kami selaku Team Serba Neka Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Serba Neka Android. semoga isi postingan tentang Artikel CSS, Artikel HTML, Artikel Javascript, Artikel Tutorial, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Tutorial Menghaluskan Scroll pada Halaman Blog Terbaru
link: Tutorial Menghaluskan Scroll pada Halaman Blog

Berbagi Tutorial Menghaluskan Scroll pada Halaman Blog Terbaru dan Terlengkap 2017

Scroll smoth yang saat ini saya ulas 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, Maksud saya scrolling pada satu halaman yang sama. nah dari cara ini kita akan menggunakan beberapa script halus (saya terjemahkan saja seperti itu dari kata scroll smooth) dan penambahan scroll to top (kembali ke atas) jika naskah atau postingan kita terlalu panjang.

Biasanya jika kita menggunakan scroll atau menggulung dengan hash (#), contohnya memberi tampilannya akan seperti meloncat. Nah, dengan scroll smoth hal ini bisa membuat scrolling pada halaman terlihat lebih halus. Mari kita lihat langkah demi langkahnya.

Catatan: Bagi yang belum mengerti dengan teknik ini silahkan di baca keterangan mengenai Kontribusi dengan HTML yang menentukan penargetan URL dan ID

Sebelum mencoba tutorial ini pastikan bahwa di blog sudah ada JQuery Library agar bisa berjalan dengan baik. jika belum ada maka gunakan script berikut untuk memasukkan JQuery kedalam Blog
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Javascript yang digunakan untuk menghaluskan Scroll atau penggulungan halaman adalah sebagai berikut:

<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 ^ = untuk mengecek bahwa link berada di halamn yg sama)
    $('a[href*=#]').each(function () {

      // Pastikan link-nya adalah halaman yang sama
      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" (memperbaiki masalah lintas platform browser)
    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>

Contoh peng-aplikasi-an pada HTML (untuk memposting mode ini gunakan mode HTML bukan Compose)

<ul>
          <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
          <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
        </ul>
       
        <h1 id="contoh1">Halaman 1</h1>
       
        <p> ........ Kalimat atau isi postingan blog ........... </p>
       
        <h1 id="contoh2">Halaman 2</h1>
       
        <p><a href="#main">Top</a></p>

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

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

Itulah sedikit Artikel Tutorial Menghaluskan Scroll pada Halaman Blog terbaru dari kami

Semoga artikel Tutorial Menghaluskan Scroll pada Halaman Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Serba Neka Android. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Tutorial Menghaluskan Scroll pada Halaman Blog