Skip to content

Кнопка "Вверх" и кнопка "Вниз"

Привет, друзья! В данном материале мы рассмотрим, как можно управлять прокруткой странице с помощью jQuery. Делать это будем на примере кнопок «Вверх» и «Вниз».

На написание статьи сподвигло следующее. Недавно я серфил в интернете, и на пара сайтов содержали кнопку «Вверх». Но это была простая ссылка с анкором «#». Это впринципе не плохо, она выполняет свою работу, но перемещение наверх происходит резка, а переход по ссылке оставляет след в истории. В этой статье мы рассмотрим плавный скролл вверх и вниз страницы с использованием jQuery.

Кнопка «Вверх»

Шаг 1 — HTML

Разметка кнопки «вверх» проста — это простая ссылка с анкором:

<a href="#" class="go-top">Вверх</a>

Шаг 2 — CSS-стили

.go-top {
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: #000;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}

Мы задали нашей кнопке «наверх» некоторые простые стили, как цвет фона и внутренние отступы, и самое главное, она будет всегда находиться в левом нижнем углу и скрыта. Мы ее покажем ее чуть позже, когда страница будет немного прокручена вниз.

Шаг 3 — JavaScript

Во-первых, не забудьте подключить к странице jQuery, т.к. все манипуляции мы будем делать с его помощью.

Теперь давайте покажем нашу кнопку, когда страница будет прокручена на 200 пикселей вниз.

$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});

А следующий код отвечает за прокрутку страницы вверх при клике на кнопку.

$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})

Кнопка «Вниз»

Шаг 1 — HTML

Кнопка «вниз» создается по тому же принципу, что и кнопка «вверх». По-этому, и эта кнопка является ссылкой с анкором.

<a href="#" class="go-bottom">Вниз</a>

Шаг 2 — CSS-стили

.go-bottom {
position: fixed;
bottom: 2em;
left: 2em;
text-decoration: none;
color: white;
background-color: #000;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
}
.go-bottom:hover {
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}

Как видите стили для кнопки «вниз» почти те же, что и у кнопки «вверх», только расположена в правом нижнем углу и по-умолчанию не скрыта, потому, что ее мы скроем, когда она выполнит свою работу и страница будет прокручена до конца.

Шаг 3 — JavaScript

Для кнопки «вниз» скрипт придется немного переделать. Сначала напишем код, который произведет прокрутку до конца страницы.

var wHeight = $(document).height();

$('.go-bottom').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: wHeight}, 300);
})

Мы создали переменную, в которой храниться значение высоты страницы, чтобы прокрутить именно на это значение пикселей. В принципе, мы могли бы поставить значение scrollTop в 9999 пикселей, но ведь страница может быть высотой и больше 10000 пикселей.

Для того, чтобы скрыть кнопку «вверх», нам придется выяснить, а на сколько страница была прокручена? Давайте посмотрим на картинку и разберемся, когда же надо скрыть кнопку.

Итак, как мы видим, после нажатия на кнопку «вниз» прокрутка страницы произошла не на всю высоту страницы, и если мы будем пытаться ее скрыть после прокрутки на общую высоту, то у нас ничего не получиться. На картинке видно, что нам надо убрать кнопку, когда прокрутка сверху страницы будет равна высоте затемненной области, то есть высоте прокрутки страницы. Ее можно получить путем вычитания из высоты страницы высоты окна браузера. Вот это мы и сделаем

var bHeight = wHeight - $(window).height();

$(window).scroll(function() {
if ($(this).scrollTop() == bHeight) {

$('.go-bottom').fadeOut(200);
} else {
$('.go-bottom').fadeIn(200);
}
});

Вот мы и нашли высоту прокрутки страницы и поместили ее в переменную bHeight и скрыли ее, если прокрутка сверху страницы равна высоте прокрутки страницы, в остальных случаях ее следует показать.