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

6140

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

Допустим, у нас есть кнопка <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>
На этом все. Надеюсь, что статья была вам полезной!

ДЕМОСКАЧАТЬ

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

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

*
code