Rumah > hujung hadapan web > tutorial js > Javascript melaksanakan kembali ke atas kemahiran khas effect_javascript

Javascript melaksanakan kembali ke atas kemahiran khas effect_javascript

WBOY
Lepaskan: 2016-05-16 16:00:48
asal
1196 orang telah melayarinya

HTML:

<input id="btn1" type="button" value="回到顶部" />
Salin selepas log masuk

CSS:

#btn1{position:fixed;bottom:10px;right:10px;}
Salin selepas log masuk

JS:

window.onload=funcition(){
  var oBtn=document.getElementById("btn");
  var timer=null;
  //申明一个变量看是否为系统还是用户滚动
  var sBys=true;
  window.onscroll=funcition(){
    if(!sBys){
      clearInterval(timer);
    }
    sBys=false;
  }
  oBtn.onclick=funcition(){
    timer = setInterval(funcition(){
      //获取scrollTop
      var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
      //当点击按钮回到顶部时计算缓冲速度
      var ispeed=Math.floor(-scrollTop/8);
      if(scrollTop==0){
        clearInterval(timer)
      }
      sBys=true;
      document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
    },30)
  }
}
Salin selepas log masuk

Mata pengetahuan:

1. Kelajuan pengiraan (penimbalan) dibundarkan ke bawah
2. Apabila scrollTop==0, pemasa perlu dikosongkan
3. Adalah perlu untuk menentukan sama ada pengguna atau js mengendalikan bar skrol Jika ia adalah operasi pengguna, kosongkan pemasa

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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