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