Javascript kembali ke atas butang pelaksanaan method_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 15:20:55
asal
1549 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan kaedah pelaksanaan javascript kembali ke butang atas, dan berkongsi dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

html:

<a href="javascript:;" id="btn" title="回到顶部"></a>
Salin selepas log masuk

css:

#btn{position:fixed;display:none;}
Salin selepas log masuk

skrip:

Dapatkan ketinggian bar skrol:document.documentElement.scrollTop || document.body.scrollTop

Dapatkan ketinggian kawasan visual:document.documentElement.clientHeight
kod js

window.onload = function(){
  var obtn = document.getElementById('btn');
  //获取页面可视区的高度
  var clientHeight = document.documentElement.clientHeight;
  var timer = null;
  var isTop = true;
  window.onscroll = function(){
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight){
    //显示按钮
      obtn.style.display = 'block';
    }else {
    //隐藏按钮
      obtn.style.display = 'none';
    }
    if (!isTop){
      clearInterval(timer);
    }
    isTop = false;
  };
  obtn.onclick = function(){    
    //设置定时器
    timer = setInterval(function(){
      //获取滚动条距离顶部的高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 6);
      document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
      
      isTop = true;
      if (osTop === 0){
        clearInterval(timer);
      }
    },30);
  };
};
Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan