Spec-Zone.ru › jQuery

.scrollTop()

Содержание:

  • .scrollTop()
    • .scrollTop()
  • .scrollTop( value )
    • .scrollTop( value )

.scrollTop()Возвращает: Число

Описание: Получить текущее вертикальное положение полосы прокрутки для первого элемента в наборе сопоставленных элементов или установить вертикальное положение полосы прокрутки для каждого сопоставленного элемента.

  • версия добавлена: 1.2.6.scrollTop()

    • Этот метод не принимает никаких аргументов.

Вертикальное положение прокрутки соответствует количеству пикселей, скрытых от просмотра сверху области прокрутки. Если полоса прокрутки находится в самом верху или если элемент не прокручивается, это число будет 0.

Пример:

Получить scrollTop абзаца.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text( "scrollTop:" + p.scrollTop() );
</script>
 
</body>
</html>

Демо:

.scrollTop( value )Возвращает: jQuery

Описание: Установить текущее вертикальное положение полосы прокрутки для каждого из набора сопоставленных элементов.

  • версия добавлена: 1.2.6.scrollTop( value )

    • значение
      Тип: Число
      Число, указывающее новое положение, до которого следует установить полосу прокрутки.

Вертикальное положение прокрутки соответствует количеству пикселей, скрытых от просмотра сверху области прокрутки. Установка scrollTop устанавливает вертикальную прокрутку каждого сопоставленного элемента.

Пример:

Установить scrollTop для div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</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-3.7.0.js"></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
 
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
 
</body>
</html>

Демо:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquery.com/scrollTop

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API