JavaScript點選按鈕返回底部詳解

admin發表於2018-09-11

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

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

程式碼例項如下:

[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()一章節。

相關文章