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