jQuery scrollTop() jQueryscrollTop()|jQuery

本文概述

jQuery scrollTop()方法的参数
jQuery scrollTop()方法的示例
jQuery的另一个示例scrollTop()

【jQuery scrollTop()】jQuery scrollTop方法用于设置或返回所选元素的垂直滚动条位置。当滚动条位于顶部时, 它指定位置0。

返回位置：使用此方法返回位置时, 它将提供集合中第一个匹配元素的当前垂直位置。
设置位置：使用此方法设置位置时, 它将为所有匹配的元素设置滚动条的垂直位置。

句法：
要返回垂直滚动条位置：

$(selector).scrollTop()

jQuery scrollTop()方法的参数

参数	描述
Position	它指定垂直滚动条的位置（以像素为单位）。

jQuery scrollTop()方法的示例让我们以一个示例来演示jQuery scrollTop()方法。

< !DOCTYPE html> < html> < head> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ alert($("div").scrollTop() + " px"); }); }); < /script> < /head> < body> < div style="border:1px solid black; width:150px; height:100px; overflow:auto"> Twinkle, twinkle, little star, How I wonder what you are! Up above the world so high, Like a diamond in the sky. Twinkle, twinkle, little star, How I wonder what you are!< /div> < br> < button> Return the vertical position of the scrollbar< /button> < p> Move the scrollbar down and click the button again.< /p> < /body> < /html>

立即测试
jQuery的另一个示例scrollTop()

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> scrollTop demo< /title> < style> div.demo { background: #7fffd4 none repeat scroll 0 0; border: 3px solid #666; margin: 5px; padding: 5px; position: relative; width: 200px; height: 150px; overflow: auto; } p { margin: 10px; padding: 5px; border: 2px solid #666; width: 1000px; height: 1000px; } < /style> < script src="http://img.readke.com/220429/2211135K7-1.jpg"> < /script> < /head> < body> < div class="demo"> < h1> Welcome to:< /h1> < p> srcmini.com< /p> < /div> < script> $( "div.demo" ).scrollTop( 300 ); < /script> < /body> < /html>

立即测试