JavaScript點選按鈕返回底部詳解

admin發表於2018-09-11
JavaScript

更多關於返回頂部底部的特效程式碼可以檢視返回頂部板塊。

下面就分享一段能夠返回底部的程式碼例項，並詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  padding:0;
  margin:0;
}
.box{
  position:relative;
  height:500px;
  width:100%;
  overflow-y:scroll;
}
.box1{
  height:1000px;
  width:100%;
  background:red;
}
.box2{
  height:1000px;
  width:100%;
  background:green;
}
.box3{
  height:1000px;
  width:100%;
  background:gray;
}
.box4{
  height:1000px;
  width:100%;
  background:yellow;
}
.box5{
  height:1000px;
  width:100%;
  background:blue;
}
.box6{
  height:2000px;
  width:100%;
  background:#eaeaea;
}
.scroll{
  height:30px;
  width:30px;
  background:#4CC9C8;
  position:fixed;
  right:40px;
  top:450px;
  display:block;
}
</style>
</head>
<body>
<div class="box" id='box'>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="scroll" id='scroll'></div>
</div>
<script type="text/javascript">
var arr=[];
var scroll={
  init:function(elements){
    arr.push(elements);
    this.scroll();
    this.click();
  },
  scroll:function(){
    var p=this.getEle(arr[0].parent),
        v=20,
        t=null, 
        x=p.scrollTop;
    clearInterval(t);
    t=setInterval(function(){
      if(p.scrollTop<p.scrollHeight-p.clientHeight){
        x+=v;
        p.scrollTop=x;
      }else{
        clearInterval(t)
      }
    },10)
  },
  click:function(){
    this.getEle(arr[0].scroll).onclick=function(){
      scroll.scroll()
    }
  },
  getEle:function(ele){
    return document.querySelector(ele)
  }
}
scroll.init({parent:'#box',scroll:'#scroll'});
</script>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var arr=[],建立一個空數字，用來存放元素，後面會有介紹。

（2）.var scroll={}，對方法進行封裝的物件。

（3）.init:function(elements){

  arr.push(elements);

  this.scroll();

  this.click();

}，此方法會進行一些初始化操作。

elements是一個物件，屬性值是選擇器。

scroll()方法和click()方法的作用後面會介紹。

（4）.scroll:function(){}，此方法實現滾動效果。

（5）.var p=this.getEle(arr[0].parent)，獲取id屬性值為box的元素物件。

（6）.v=20，定時器函式沒執行一次，移動的尺寸。

（7）.t=null，宣告一個變數並賦初值為null，用來儲存定時器函式的標識。

（8）.x=p.scrollTop，獲取向上滾動的尺寸。

（9）.clearInterval(t)，防止多次點選滾動按鈕出現定時器函式執行疊加的現象。

（10）.t=setInterval(function(){

  if(p.scrollTop<p.scrollHeight-p.clientHeight){

    x+=v;

    p.scrollTop=x;

  }else{

    clearInterval(t)

  }

},10)當向上滾動的尺寸，小於元素的scrollHeight值減去clientHeight值時，持續滾動。

否則停止定時器函式的執行。

二.相關閱讀:

（1）.push()參閱javascript push()一章節。

（2）.scrollTop參閱js scrollTop一章節。

（3）.clearInterval()參閱clearInterval()一章節。

（4）.setInterval()參閱window.setInterval()一章節。

（5）.scrollHeight參閱scrollHeight一章節。

（6）.clientHeight參閱clientHeight一章節。

（7）.document.querySelector()參閱document.querySelector()一章節。

相關文章