jQuery метод .scrollTop()

Определение и применение

jQuery метод .scrollTop() возвращает вертикальную позицию прокрутки первого совпавшего элемента в наборе, или устанавливает вертикальную позицию прокрутки всем выбранным элементам в наборе.

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

jQuery синтаксис:

JavaScript

$( selector ).scrollTop() // метод используется без параметров

$( selector ).scrollTop( value )

value - Integer

Добавлен в версии jQuery

1.2.6

Значения параметров

Параметр	Описание
value	Определяет вертикальную позицию прокрутки в пикселях.

Пример использования

Метод .sсrollTop() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('div').scrollTop()) //  возвращаем значение вертикальной позиции прокрутки первого совпавшего элемента <div> в наборе и выводим в консоль браузера
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

div {
  background-color: green; /* устанавливаем цвет заднего фона */
  height: 50px; /* высота элемента */
  width: 300px; /* ширина элемента */
  margin: 20px; /* внешние отступы со всех сторон */
}

В этом примере с использованием jQuery метода .scrollTop() мы возвращаем значение вертикальной позиции прокрутки первого совпавшего элемента <div> в наборе и выводим в консоль браузера.

Рассмотрим пример в котором с помощью метода .scrollTop() мы установим для элементов новое значение вертикальной позиции прокрутки:

Пример использования jQuery метода .scrollTop() (установка значения)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div>Какой чудесный день. Какой чудесный пень.Какой чудесный день. Какой чудесный пень.</div>
<div>Какой чудесный день. Какой чудесный пень.Какой чудесный день. Какой чудесный пень.</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').scrollTop(25)
    })
})

style.css

CSS

div {
    width: 150px;
    height: 100px;
    margin: 20px;
    overflow-y: scroll;
}

В этом примере с использованием jQuery метода .scrollTop() мы устанавливаем новое значение вертикальной позиции прокрутки всех элементов <div> в наборе.