ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Прокрутка страницы вверх и вниз на jQuery

Прокрутка страницы вверх и вниз на jQuery

Прокрутка страницы вверх и вниз на jQuery
Отличное решение кнопок, которые задействованы для прокрутки страницы вверх и вниз при использовании jQuery и CSS, что фиксирует сторону сайта. Так как при установках вы увидите функцию поднятие, а также скользящий вниз страницу по левую сторону. Где идут стрелки с красным и зеленым оттенком цвета, которые установлены под ссылками, а значит их можно сменить на свои оригинальные элементы по дизайну.

Безусловно этот скрипт не новый, но возможно он также остается актуальным на сайты, которые на одной страницы имеют много информации. И здесь он будет отличным помощником, где вы при клике можете поднять и опустить данную информацию, что находится на странице. Теперь определимся по сторонам, это выбор левой или правой стороны, а точнее перетащить кнопки на правую сторону, где остается заменить margin:30px; на right:30px; и все.

Установка:

Библиотека в HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<div class="podnatye-knopakes" style="position:fixed;bottom:70px;" id="web-deva_up"><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/gedasmib.png" alt="Вверх" /></div>
<div class="podnatye-knopakes" style="position:fixed;bottom:20px;" id="web-deva_down"><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/degedopsa.png" alt="Вниз" /></div>

CSS

Код
.podnatye-knopakes {
margin:30px;
cursor: pointer
}

JS

Код
jQuery(function() {
var overelem = jQuery('body');

jQuery('#web-deva_up').fadeIn('slow');
jQuery('#web-deva_down').fadeIn('slow');

jQuery('#web-deva_down').click(
function (e) {
jQuery('html, body').animate({scrollTop: overelem.height()}, 999);
}
);
jQuery('#web-deva_up').click(
function (e) {
jQuery('html, body').animate({scrollTop: '0px'}, 999);
}
);
});

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

Демонстрация
2020-11-05 Загрузок: 1 Просмотров: 268 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2020-11-21 01:591
0
Здесь еще стрелки по старой версии сделаны, что сейчас можно просто прописать шрифтовые кнопки под выбор. Хотя с другой стороны эти стрелки должны отлично сотрется, только при мобильном просмотре из нужно автоматически убирать.
avatar