jQuery scrollTop()

admin發表於2017-10-27
jQuery

此方法返回或設定匹配元素的滾動條的垂直偏移量。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.scrollTop()

不帶引數的時候返回匹配元素相對滾動條頂部的偏移量。

jQuery1.2.6版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.scrollTop(value)

引數解析:

value：設定滾動條垂直位置偏移量。

jQuery1.2.6版本新增。

程式碼例項:

如果此函式沒有引數，那麼就是獲取使匹配元素拖動滾動條向上滾動的距離，也就是匹配元素內容被頂部所遮擋的尺寸，此函式有效的條件是匹配元素的高度小於內容的高度，並且在垂直方向上有滾動條。先看一個圖示:

a:3:{s:3:\"pic\";s:43:\"portal/201710/27/122013arjzllijefj1jrca.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很多人認為箭頭指向的尺寸是scrollTop()返回值，並非如此，此尺寸只是一個標誌而已。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>scrollTop()函式-螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  border:1px solid black;
  overflow:auto;
}
#inner{
  height:400px;
  width:20px;
  margin:0px auto;
  background:red;
}
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function(){
    alert($("#box").scrollTop())
  })
}); 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="inner">螞蟻部落歡迎您</div> 
</div> 
<input type="button" id="bt" value="檢視結果"/>
</body> 
</html>

如果此函式帶有引數，那麼設定匹配元素向上滾動的尺寸。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>scrollTop()函式-螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  border:1px solid black;
  overflow:auto;
}
#inner{
  height:400px;
  width:20px;
  margin:0px auto;
  background:red;
}
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#bt").click(function(){
    $("#box").scrollTop(30)
  })
}); 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="inner">螞蟻部落歡迎您</div> 
</div> 
<input type="button" id="bt" value="檢視結果"/>
</body> 
</html>

以上程式碼中，點選按鈕可以設定匹配元素向上滾動的尺寸。

相關文章