» »

Кнопка "Наверх" с плавным скроллом на CSS

Кнопка "Наверх" с плавным скроллом на CSS

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

Также закрепленные стили поставить в CSS, там веб-разработчик самостоятельно может выставить тот дизайн стилистики под основной шаблон сайта. При установках можно добавить тень, которая могла быть по умолчанию или при клике, так как там меняется оттенок цвета. И также есть прозрачность, которое поставлена на 0.7, где для светлого сайта можно снизить.

Вообще этот плагин полностью привязан для плавной прокрутки вверх, что располагается в правом нижнем углу по длине странице интернет ресурс. Где появление происходит в заданном месте, и аналогично она пропадает, все зависит от прокрутки.

После как поставите, та такой вид к кнопки идет.

Кнопка вверх с плавной скроллом в CSS

Приступаем к установке:

Там где хотите видеть, если на всех страницах, то в них сайта ставим скрипт.

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;
}

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

Если ставить старую версию кнопки, то она постоянно находится на странице, хотя скроллинг у них идентичный, где также можно построить стиль под сайт, на котором установка происходит.
2018-12-12 Просмотров: 280 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2018-12-12 18:381
0
Как эта кнопка работает, то можно посмотреть на этом сайте.
avatar