javascript實現網頁平滑定位程式碼例項

antzone發表於2017-04-13
JavaScript網頁

本章節分享一段程式碼例項，它實現了網頁內部平滑定位的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
a {
  color: #fff;
}
.menu {
  position: fixed;
  bottom: 100px;
  right: 50px;
  width: 70px;
  height: 124px;
}
.menu ul li {
  width: 70px;
  height: 30px;
  margin-top: 1px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background: orange;
  cursor: pointer;
}
.menu ul li a {
  display: block;
  width: 70px;
  height: 30px;
}
.box {
  margin: 10px auto;
  width: 980px;
  height: 580px;
  padding: 10px;
  background: -webkit-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
  color: #fff;
  font-size: 200px;
  text-align: center;
  line-height: 580px;
  border: 1px #000 solid;
}
</style>
<script type="text/javascript">
window.onload = function() {
  backtop();
 
}
 
function backtop() {
  var timer = null;
  var speed = 0;
  var button = document.getElementById('menu').getElementsByTagName('li');
 
  for (var index = 0; index < button.length; index++) {
    button[index].index = index
  }
 
  function menu(obj, box) {
    obj.onclick = function() {
      clearInterval(timer)
      var b = document.getElementById(box);
      timer = setInterval(function() {
        //元素距離頂部距離
        var otop = b.offsetTop
          //滾動條滾動距離
        var stop = document.documentElement.scrollTop || document.body.scrollTop;
        var ss = otop - stop;
        //alert(ss);
        var speed = (ss - 10) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        document.documentElement.scrollTop = document.body.scrollTop = stop + speed;
        if (ss == 10 && speed == 0) {
          clearInterval(timer);
        }
      }, 30)
    }
  }
  menu(button[0], 'a');
  menu(button[1], 'b');
  menu(button[2], 'c');
  menu(button[3], 'd');
 
  button[4].onclick = function() {
    clearInterval(timer);
    timer = setInterval(function() {
      var sTop = document.documentElement.scrollTop || document.body.scrollTop;
      var speed = Math.floor(-sTop / 5);
      document.documentElement.scrollTop = document.body.scrollTop = sTop + speed;
      if (sTop == 0) {
        clearInterval(timer);
      }
    }, 30)
  }
}
</script>
</head>
<body>
  <div class="menu" id="menu">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>返回頂部</li>
    </ul>
  </div>
  <div class="box">平滑跳轉</div>
  <div class="box" id="a">1</div>
  <div class="box" id="b">2</div>
  <div class="box" id="c">3</div>
  <div class="box" id="d">4</div>
  <div class="box"></div>
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload = function() {

  backtop();

}當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.function backtop() {}，此函式實現了定位功能。

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

（4）.var speed = 0,宣告一個變數並賦初值為0，用來儲存運動速度。

（5）.var button = document.getElementById('menu').getElementsByTagName('li')，獲取li元素集合。

（6）.for (var index = 0; index < button.length; index++) {

  button[index].index = index

}，通過for迴圈為每一個li元素建立一個自定義的index屬性，並賦值為當前迴圈的index值。

（7）.function menu(obj, box) {},此函式可以為指定的按鈕（也就是li元素）註冊事件處理函式，點選可以實現定位。

引數obj是要註冊事件處理函式的按鈕物件，第二個是id屬性值。

（8）.obj.onclick = function() {}，註冊事件處理函式。

（9）.clearInterval(timer)，停止當前定時器函式的執行，防止由於多次連續點選定位按鈕，造成定時器函式疊加執行的現象。

（10）.var b = document.getElementById(box)，獲取元素物件，其實也就是定位的目標元素物件。

（11）.timer = setInterval(function() {},30)，每隔30毫秒執行一次回撥函式，這樣就實現了動畫方式定位效果。

（12）.var otop = b.offsetTop，獲取元素距離頂部的距離。

（13）.var stop = document.documentElement.scrollTop || document.body.scrollTop,向上滾動的距離。

（14）.var ss = otop - stop，獲取距離差,也就是距離目的元素的尺寸。

（15）.var speed = (ss - 10) / 10，獲取移動的速度，也就是定時器函式每次執行滾動的尺寸。

（16）.speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed),對速度進行上攝入和下舍入，如此多次反覆的運算，最終speed速度就可以趨於0。（17）.document.documentElement.scrollTop = document.body.scrollTop = stop + speed，設定向上滾動的尺寸。

（18）.if (ss == 10 && speed == 0) {

  clearInterval(timer);

},如果到達目標元素，那麼就停止定時器函式的執行。

（19）.button[4].onclick = function() {

  clearInterval(timer);

  timer = setInterval(function() {

    var sTop = document.documentElement.scrollTop || document.body.scrollTop;

    var speed = Math.floor(-sTop / 5);

    document.documentElement.scrollTop = document.body.scrollTop = sTop + speed;

    if (sTop == 0) {

      clearInterval(timer);

    }

  }, 30)

}，點選按鈕返回頂部，原理和上面的定位大同小異。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.clearInterval()可以參閱clearInterval() 一章節。

（3）.scrollTop可以參閱js scrollTop一章節。

（4）.offsetTop可以參閱js offsetTop一章節。

（5）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（6）.Math.floor()可以參閱javascript Math.floor()一章節。

相關文章