Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript - Jika layar memiliki tinggi maksimal 100 dengan muatan conten isi halaman 150, maka scrollbar akan berfungsi sebagai alat untuk menggulung layar untuk mengetahui batas akhir dimana layar tersebut akan berhenti bergulung.

Gambar Scrollbar postingan


Baca juga - Daftar menu Artikel Blog - SAHABAT BLOGGER 77


Pertanyaannya, bagaimana Mengetahui Batas Akhir Gulungan Layar jika conten yang kita buat melebihi tinggi layar?. Mungkin hal seperti ini sudah pernah Anda terapkan pada halaman blog dengan membuat tombol "Back To Top", namun jika belum Anda boleh terapkan pada tutorial sebelumnya tentang Cara Membuat Tombol Back To Top Efek Scroll. Dengan JavaScript kita bisa mengetahui dimana batas akhir gulungan layar tersebut akan berhenti, karena pada dasarnya scrollbar akan tampil hanya jika isi konten melebihi tinggi layar, seperti Tutorial kali ini, saya tidak akan menghilangkan efek KLIK pada tombol "Kembali Ke Atas", namun saya akan memberikan sentuhan berbeda dengan desain menu navigasi sebagai efeknya.

Berikut salah satu script perintah untuk membuat tombol kembali ke atas dengan fungsi gerak cepat. kode pada JavaScript berikut sudah di support dengan CSS-fixed, sehingga tampilan tombol akan melayang. Tampilkan tombol secara melayang (fixed) saat halaman di scroll, dan aktifkan fungsi klik "Back To Top" saat berada pada batas akhir halaman (dibawah), yang jika kita ilustrasikan dengan bentuk JavaScript kurang lebih seperti ini:


scrollup:function(){
       if (!this.cssfixedsupport)
       this.$control.css({opacity:0})
       var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
       if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
       else
           dest=0
       this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
   },
   keepfixed:function(){
       var $window=jQuery(window)
       var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
       var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
       this.$control.css({left:controlx+'px', top:controly+'px'})
   },


TAHAP PENYELESAIAN
Temukan kode ]]></b:skin>

Selanjutnya letakkan CSS berikut tepat di atasnya

#sb77-scrollbar {
  position:fixed!important;
  position:absolute;right:0;
  bottom:0;left:0;
  padding:10px 15px;border-top:6px double #fff;
  background-color:#660000;
  color:white;display:none;}

.menu-satu {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid lime;}

.menu-dua {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid magenta;}

.menu-tiga {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid orange;}

.menu-empat {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid #ead1dc;}

.menu-lima {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid cyan;}

.menu-enam {
  background:#38f;
  color:#fff;padding:6px 9px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  border-bottom:3px solid yellow;}


cek batas akhir gulungan layar saat Anda berada di akhir halaman, Lakukan sesuatu!. Dan beri tanda dengan tampilan desain menu seperti ini:




DEMO SHOW



Selanjutnya, tempatkan kode berikut pada widget HTML/JavaScript
<script src="https://s-blogger77.googlecode.com/svn/trunk/endingpage.js"></script>
<div id="sb77-scrollbar">
<a href="#top" onclick="javascript:this.parentNode.style.display='none';">Klik Disini</a>  Untuk Kembali Ke ATAS.  Atau Mau Baca Artikel Lainnya &#187;
<a class="menu-satu" href="#">Beranda</a>
<a class="menu-dua" href="#">Profile</a>
<a class="menu-tiga" href="#">Artikel</a>
<a class="menu-empat" href="#">Forum</a>
<a class="menu-lima" href="#">Kontak</a>
<a style="menu-enam" href="#">Category</a>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. sapa ambil pertamax nya dulu ya sist :D hehe

    BalasHapus
    Balasan
    1. aduh salah tulis seharusnya saya .. hehe bagus sekali ini sist boleh deh nanti akan saya coba di blog percobaan saya :D saya simpan BM dulu ya page nya

      Hapus
  2. langsung ke tkp ya pas nih buat blog ane :-d

    BalasHapus
    Balasan
    1. kalau belum pas, masih bisa dipermak kok mbak,hehe

      Hapus
  3. ooo fungsi nya seperti itu ya mbak, memang setelah saya coba di demo artikel ini cepat tampilan ke atasnya, tapi apakah ini bisa diterapkan di postingan aja mbak kode-kodenya, sebab jika template edit HTML nya terus dipenuhi kode-kode tentu akan berat, benarkan :D (h)

    BalasHapus
    Balasan
    1. seperti halnya perintah script untuk tombol kembali ke-atas, bisa kita tempatkan pada edit-HTML namun bisa juga kita sisipkan pada halaman widget-gadget pada TATA-LETAK mas,namun jangan lupa untuk menambahkan kode <style>

      contoh-
      [pre]<style>
      ...
      elemen CSS di sini
      ...
      </style>
      <script>
      window.onscroll = function() {
      if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1 || navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
      if (document.documentElement.scrollHeight == (document.body.scrollTop + document.documentElement.clientHeight)) {
      document.getElementById('sb77-scrollbar','sahabatblogger77').style.display = "block";
      }
      } else {
      if (document.documentElement.scrollHeight == (document.documentElement.scrollTop + document.documentElement.clientHeight)) {
      document.getElementById('sb77-scrollbar','sahabatblogger77').style.display = "block";
      }
      }
      };
      </script>
      //lalu letakkan kode HTML disini...[/pre]

      Hapus
    2. iya mbak, terima kasih ya atas informasi dan penjelasannya semoga berkah dan bermanfaat

      Hapus
  4. Salam kenal mbak, oh jadi gtu ya caranya. Ijin nyimak ya mbak

    BalasHapus
    Balasan
    1. salam kenal juga mas, semoga betah dengan artikel-artikel pada blog ini,
      hehe..

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. sperti biasa penjelasannya lengkap banget

    BalasHapus
  7. siip sangat bermanfaat bagi pemula seperti saya

    BalasHapus
  8. wah lumayan juga.. kapan-kapan bisa dicoba

    BalasHapus
  9. wah lumayan juga.. kapan-kapan bisa dicoba

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK