Прокрутка страницы вверх и вниз на CSS/JS
 | |
| Интересное решение для сайта, это кнопки прокрутки страницы вверх и вниз, которые находятся по левую сторону, где созданы с помощью HTML и jQuery. Они чем-то схоже по своей функции с одном популярным сайтом. Но здесь можете сами изменить дизайн, как кнопки, и безусловно присутствие эффектов при наведении курсора. Сам функционал понятен, где кнопки будут смотреться по умолчанию и не меняться, вам остается сделать клик поднять или опустить страницу. Хотел сделать прозрачными, где добавить темный оттенок, но здесь на светлом или на темном фоне не получится этот трюк, меняется только гамма цвета, ведь фон идет в однообразном дизайне. Если кто-то решит, что для всех страниц на сайте такой скрипт не нужен, а вот можно разместить на отдельно созданной страницы, где размещено очень много материала, то с таким подходом согласен. Где вы сами решите, какой стиль им больше подойдет, и какие кнопки хотите наблюдать. Также все проверил, прежде чем разместить на сайте, скрин прилагаю ниже, где и как по умолчанию они будут выглядеть, разве только цветовую гамму у стрелок на светло-синею сменил.  Установка: Код <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> HTML Код <div class="plavnaya_uprokruka"> <a href="#" id="adnatuse_kovega"><span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a> <a href="#" id="ponyave_stransu"><span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a> </div> CSS Код .plavnaya_uprokruka { position: fixed; top: 0; bottom: 0; left: 0; width: 88px; transition: background 0.2s ease; } .plavnaya_uprokruka:hover { background: #f3f3f3; } .plavnaya_uprokruka svg { fill: #0061ff; } #adnatuse_kovega { display: block; width: 100%; height: 40%; position: absolute; top: 0; left: 0; text-align: center; transition: background 0.2s ease; } #adnatuse_kovega span { display: block; width: 100%; position: absolute; left: 0; top: 50px; } #adnatuse_kovega:hover { background: #e4e3e4; } #ponyave_stransu { display: block; width: 100%; height: 50%; position: absolute; top: 50%; left: 0; text-align: center; transition: background 0.2s ease; } #ponyave_stransu span { display: block; width: 100%; position: absolute; left: 0; bottom: 20px; } #ponyave_stransu:hover { background: #e4e3e4; } JS Код <script> $(function(){ $('#adnatuse_kovega').click(function(){ $('html, body').animate({scrollTop: 0}, 600); return false; }); $('#ponyave_stransu').click(function(){ $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600); return false; }); }); </script> Есть много вариантов на такой скрипт, который будет при клике поднимать страницу. Но здесь не забываем, что аналогичным способом вы можете страницу быстро ко клику спустить до низа сайта. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |