Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript

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.

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
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 >>

http://sahabatblogger77.blogspot.com/2014/07/mengetahui-batas-akhir-gulungan-layar-dengan-javascript.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77