ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Кнопка «Вверх» для сайта с помощью jQuery

Кнопка «Вверх» для сайта с помощью jQuery

Кнопка «Вверх» для сайта с помощью jQuery
Эта функция позволит посетителям легко перемещаться страницу в верхнюю часть вашего сайта с помощью кнопки вверх, что автоматически появляется. Где по умолчанию она поставлена по правую стороны, где если страница опускается, то автоматически появляется кнопка, где при одном клике поднимается страница до верхней части сайта.

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

Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML

Код
<a href="#" id="podnimaya-stranitsu" title="Вверх"><i class="fas fa-chevron-up"></i></a>

CSS

Код
html {scroll-behavior: smooth;}
body {background-color: #BBDEFB; height: 200vh;}
* {margin: 0; padding: 0;}
a {color: #1b1b1b;}
#podnimaya-stranitsu {
  position: fixed;
  bottom: 0;
  right: 0;
  cursor: pointer;
  transition: 0.3s;
}
#podnimaya-stranitsu i {
  padding: 12px 14px;
  margin: 20px;
  background-color: rgba(1, 1, 1, 0.9);
  font-size: 38px;
  border-radius: 50%;
  color: #f9f2f2;
}

JS

Код
$(document).ready(function() {
  // Показать или скрыть кнопку липкого нижнего колонтитула
$(function() {
  $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "80") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
  if ($(window).scrollTop() <= "80") $(scrollDiv).fadeOut("fast")
  else $(scrollDiv).fadeIn("slow")
  });

  $(this).click(function() {
  $("html, body").animate({scrollTop: 0}, "fast")
  })
  }
});
});
$(function() {
  $("#podnimaya-stranitsu").scrollToTop();
});

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

Демонстрация
2020-11-09 Загрузок: 2 Просмотров: 238 Комментарий: (0)

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

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

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

Комментарий: 0
avatar