Надежный хостинг с бесплатным ssl для доменов и удобным файловым менеджером
Skillbox

Скрипт исчезновения и появления кнопки при прокрутке (скроллинге) страницы

()

Практически на каждом сайте можно увидеть кнопку скроллинга, которая прокручивает сайт вверх при нажатии. И, как правило, эта кнопка появляется только тогда, когда страница прокручивается вниз на определенное расстояние. Так же эта кнопка автоматически скрывается, если вернуться наверх страницы. И в этой статье мы как раз рассмотрим скрипт, который скрывает и отображает кнопку при скроллинге страницы.

Допустим, у нас есть кнопка <div id="button">кнопка</div>, которую необходимо скрыть при прокрутке страницы вниз на 200px.  Для этого понадобится такой скрипт:

<script>
jQuery(document).ready(function($){
$('#button').fadeOut(); //скрываем кнопку
$(window).scroll(function () {
if ($(this).scrollTop() > 200) { // при прокрутке страницы на 200 пикселей вниз
$('#button').fadeIn();   // отображаем кнопку
} else {
$('#button').fadeOut(); // в противном случае скрываем
}
});
});
</script>

Перед использованием скрипта не забываем подключать к странице библиотеку jquery. Ее можно либо скачать отсюда, либо подключить с помощью ссылки

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
На этом все. Надеюсь, что статья была вам полезной!

ДЕМОСКАЧАТЬ

Вам понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

Добавить комментарий

Ваш адрес email не будет опубликован.

*

code