التابع `‎‎.scrollTop()‎`‎ في jQuery

يجلب هذا التابع موضع شريط التمرير الشاقولي الحالي للعنصر الأول من مجموعة العناصر المطابقة، أو يضبط موضع شريط التمرير الشاقولي لجميع العناصر المطابقة.

`‎.scrollTop()‎`

القيم المعادة

يعيد عددًا من النوع Number.

الوصف

يجلب هذا التابع موضع شريط التمرير الشاقولي الحالي للعنصر الأول من مجموعة العناصر المطابقة.

`‎.scrollTop()‎`

أُضيف مع الإصدار: 1.2.6، ولا يقبل هذا التابع أية وسائط.

موضع شريط التمرير الشاقولي هو نفسه عدد البكسلات المخفية من النافذة المعروضة القابلة للتمرير وحتى أعلاها (الجزء المخفي من المنطقة العلوية القابلة للتمرير). إن كان شريط التمرير مزاحًا كليًّا إلى الأعلى أو كان العنصر غير قابل للتمرير، فستكون قيمة هذا العدد 0.

أمثلة

جلب قيمة موضع شريط التمرير الشاقولي (scrollTop) لفقرة <p>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop مثالٌ عن استعمال التابع</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
</script>
 
</body>
</html>

`‎.scrollTop( value )‎`

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يضبط هذا التابع موضع شريط التمرير الشاقولي لكل عنصر في مجموعة العناصر المطابقة.

`‎.scrollTop( value )‎`

أُضيف مع الإصدار: 1.2.6.

عدد صحيح يمثِّل الموضع الجديد المراد تعيينه لشريط التمرير الشاقولي.

موضع شريط التمرير الشاقولي هو نفسه عدد البكسلات المخفية من النافذة المعروضة القابلة للتمرير وحتى أعلاها (المنطقة العلوية القابلة للتمرير).

أمثلة

ضبط قيمة موضع شريط التمرير الشاقولي (scrollTop) للعنصر <div>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop مثالٌ عن استعمال التابع</title>
  <style>
  div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="demo"><h1>السلام عليكم</h1><p>مرحبًا</p></div>
 
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
 
</body>
</html>

مصادر

صفحة التابع ‎‎.scrollTop()‎ في توثيق jQuery الرسمي.