scrollTop()
42
посл. ред.
12.08.2016
Метод scrollTop() изменяет вертикальную прокрутку всех элементов выборки или возвращает значение прокрутки первого элемента.
Вертикальная прокрутка - это высота той области элемента, которая скрыта сверху из-за прокрутки, в пикселях.
Варианты использования
jQ_object.scrollTop() => Number- Возвращает величину вертикальной прокрутки первого элемента выборки. Если ползунок полосы прокрутки находится в верхнем положении или элемент не имеет вертикальной полосы прокрутки, тогда возвращается
0. jQ_object.scrollTop(значение) => jQuery- Изменяет величину вертикальной прокрутки всех элементов выборки на указанное значение.
Примеры
<html>
<head>
<title>Работа с элементами DOM</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
ul {
width: 200px;
height: 150px;
border: 2px solid #789;
overflow: auto;
}
li {
width: 300px;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, aliquid corporis dolor sed quod nihil nam sint veniam, laborum fuga deleniti, est mollitia blanditiis sit placeat repellendus suscipit illum odit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, ut odit labore. Cum excepturi maxime nostrum nobis delectus totam vel, fugiat molestias facere ipsam, dolores adipisci praesentium pariatur amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis perspiciatis, totam dicta placeat ratione dolor numquam labore, esse dolorum autem ad sapiente, at voluptate. Odio minus obcaecati pariatur officiis molestias.</li>
</ul>
<button onclick="$('ul').scrollTop(0)">Наверх</button>
</body>
</html>
<script>
$('ul').scrollTop(100);
</script>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, aliquid corporis dolor sed quod nihil nam sint veniam, laborum fuga deleniti, est mollitia blanditiis sit placeat repellendus suscipit illum odit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, ut odit labore. Cum excepturi maxime nostrum nobis delectus totam vel, fugiat molestias facere ipsam, dolores adipisci praesentium pariatur amet.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis perspiciatis, totam dicta placeat ratione dolor numquam labore, esse dolorum autem ad sapiente, at voluptate. Odio minus obcaecati pariatur officiis molestias.