Кнопка "Наверх" с плавным скроллом на CSS
 | |
| Эта кнопка в функции поднятие страниц на сайте вверх, также на ней присутствует анимация и главное, это исчезновение когда страница наверху. Также аналогично вы как только опустите страницу, то в какой, то момент она снизу сайта будет выезжать. Здесь идет плавный прокат, не говоря о том, что она легко устанавливается на сайт. Вам нужно прописать скрипт в нужное место, он полностью отвечает за функциональность. Также закрепленные стили поставить в CSS, там веб-разработчик самостоятельно может выставить тот дизайн стилистики под основной шаблон сайта. При установках можно добавить тень, которая могла быть по умолчанию или при клике, так как там меняется оттенок цвета. И также есть прозрачность, которое поставлена на 0.7, где для светлого сайта можно снизить. Вообще этот плагин полностью привязан для плавной прокрутки вверх, что располагается в правом нижнем углу по длине странице интернет ресурс. Где появление происходит в заданном месте, и аналогично она пропадает, все зависит от прокрутки. После как поставите, та такой вид к кнопки идет.  Приступаем к установке: Там где хотите видеть, если на всех страницах, то в них сайта ставим скрипт. HTML Код <!-- <Вверх> --> <script type="text/javascript"> $('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ bottom: '80px' }); } else { $('.upbtn').css({ bottom: '-80px' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); </script> <!-- </Вверх> --> CSS Код /*Knopka Verx*/ .upbtn { opacity: 0.7; z-index: 9999; width: 38px; height: 38px; position: fixed; bottom: -80px; right: 20px; border-radius: 50px; cursor: pointer; border: 2px solid #d2e3f1; transition: all .7s ease-in-out; background-position: center center; background-repeat: no-repeat; background-color: #17527b; background-size: 50% auto; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzMy45NjgsMjc4LjY1N0wyNDguMzg3LDkyLjc5Yy03LjQxOS03LjA0NC0xNi4wOC0xMC41NjYtMjUuOTc3LTEwLjU2NmMtMTAuMDg4LDAtMTguNjUyLDMuNTIxLTI1LjY5NywxMC41NjYgICBMMTAuODQ4LDI3OC42NTdDMy42MTUsMjg1Ljg4NywwLDI5NC41NDksMCwzMDQuNjM3YzAsMTAuMjgsMy42MTksMTguODQzLDEwLjg0OCwyNS42OTNsMjEuNDExLDIxLjQxMyAgIGM2Ljg1NCw3LjIzLDE1LjQyLDEwLjg1MiwyNS42OTcsMTAuODUyYzEwLjI3OCwwLDE4Ljg0Mi0zLjYyMSwyNS42OTctMTAuODUyTDIyMi40MSwyMTMuMjcxTDM2MS4xNjgsMzUxLjc0ICAgYzYuODQ4LDcuMjI4LDE1LjQxMywxMC44NTIsMjUuNywxMC44NTJjMTAuMDgyLDAsMTguNzQ3LTMuNjI0LDI1Ljk3NS0xMC44NTJsMjEuNDA5LTIxLjQxMiAgIGM3LjA0My03LjA0MywxMC41NjctMTUuNjA4LDEwLjU2Ny0yNS42OTNDNDQ0LjgxOSwyOTQuNTQ1LDQ0MS4yMDUsMjg1Ljg4NCw0MzMuOTY4LDI3OC42NTd6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) } .upbtn:hover { opacity: 1; background-color: #337AB7; } В отличение от других, то здесь добавлена функция, которая уже в скрипте в самом начале нужно выстраивать, это зависит высота или по какой стороне она находится. Если ставить старую версию кнопки, то она постоянно находится на странице, хотя скроллинг у них идентичный, где также можно построить стиль под сайт, на котором установка происходит. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
