jQuery實現的錨點平滑定位程式碼例項

螞蟻小編發表於2017-03-25
jQuery

本章節介紹一下如何利用jquery實現錨點的平滑定位效果。

因為預設狀態下的錨點定位是瞬間完成的，不夠美觀，下面是用jquery實現的平滑定位效果。

程式碼如下:

[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;
}
.main{
  width:1000px;
  margin:0 auto;
  position:relative;
}
.main img{float:left;}
.bg{
  position:absolute;
  width:100%;
  z-index:-5;
}
.bg01{
  height:885px;
  width:500px;
  background:red;
  margin:0px auto;
}
.bg02{
  height:938px;
  width:500px;
  background:black;
  margin:0px auto;
}
.bg03{
  height:946px;
  width:500px;
  background:blue;
  margin:0px auto;
}
.bg04{
  height:946px;
  width:500px;
  background:green;
  margin:0px auto;
}
.div_scoll{
  position:fixed;
  width:60px;
  height:200px;
  right:30px;
  top:50%;
  font-size:12px;
}
a{
  display:block;
  text-align:center;
  color:#000;
  width:60px;
  line-height:50px;
  text-decoration:none;
  margin:2px;
  background:#CCC;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".div_scoll a").click(function(){
    $("html,body").animate({scrollTop:$($(this).attr("href")).offset().top + "px"},1000);
  });
});
</script>
</head>
<body>
<div class="wrapper">
  <div class="main">
    <div id="tab_01" class="tab"></div>
    <div id="tab_02" class="tab"></div>
    <div id="tab_03" class="tab"></div>
    <div id="tab_04" class="tab"></div>
  </div>
  <div class="bg">
    <div class="bg01" id="bg01"></div>
    <div class="bg02" id="bg02"></div>
    <div class="bg03" id="bg03"></div>
    <div class="bg04" id="bg04"></div>
  </div>
</div>
<div class="div_scoll"> 
  <a href="#bg01">螞蟻部落一</a> 
  <a href="#bg02">螞蟻部落二</a> 
  <a href="#bg03">螞蟻部落三</a> 
  <a href="#bg04">螞蟻部落四</a> 
</div>
</body>
</html>

上面的程式碼實現了平滑定位效果，下面介紹一下它的實現過程。

實現原理:

和程式碼一樣，原理也是非常的簡單，為每一個連結a元素註冊click事件處理函式，當點選連結的時候，能夠獲取當前連結的href屬性值，此屬性值恰好和要定位的div的id屬性值相對應，然後就可以獲取div的offset().top屬性值，此屬性值是指定元素距離document文件頂端的距離，然後用動畫方式來設定html或者body的scrollTop屬性值為對應元素距離document文件頂端的距離。

相關文章