Прокрутка страницы вверх и вниз на 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); } ); }); Скрипт и функционал многим знаком, для того, чтоб его подробно описывать со всеми деталями. Так как присутствует демонстрация, где можете его оценить, хотя там не чего такого, что вы не встречал нет, ведь все выполнено по стандарту. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
