Как создать & quot; Прокрутка вверх & quot; Кнопка с использованием JavaScript и jQuery

Дядя Влад

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

В этой статье вы узнаете, как создать кнопку прокрутки вверх с помощью JavaScript и jQuery.

Как создать кнопку прокрутки вверх с помощью JavaScript

Вы можете добавить на свой веб-сайт кнопку с прокруткой вверх, используя следующий фрагмент кода:

HTML код

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>Scroll-to-Top button using JavaScript</title>
 <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
 <!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
 <!-- https://www.bootstrapcdn.com/fontawesome/ -->
 <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
 </head>
 <body id="top">
 <h1>
 Scroll To Top
 </h1>
 <div class="long-text">
 <p>Scroll down to see the button.</p>
 <p>Click the button to see smooth scroll to top.</p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 </div>
 <div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
 </div>
 <script type="text/javascript" src="script.js"></script>
 </body>
 </html>

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

 <div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
 </div>

Кнопка прокрутки вверх указывает на верх страницы с помощью идентификатора #top . #top – это идентификатор тега <body> . Значок кнопки прокрутки вверх создается с использованием font awesome .

Код JavaScript

 // ===== Scroll to Top ====
 const scrollTop = document.getElementById('scrolltop')
 // When the page is loaded, hide the scroll-to-top button
 window.onload = () => {
 scrollTop.style.visibility = "hidden";
 scrollTop.style.opacity = 0;
 }
 // If the page is scrolled more than 200px,
 // display the scroll-to-top button
 // Otherwise keep the button hidden
 window.onscroll = () => {
 if (window.scrollY > 200) {
 scrollTop.style.visibility = "visible";
 scrollTop.style.opacity = 1;
 } else {
 scrollTop.style.visibility = "hidden";
 scrollTop.style.opacity = 0;
 }
 };

Кнопка прокрутки вверх отображается и скрывается в соответствии со следующими условиями:

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

Код CSS

Связанный: Как использовать CSS box-shadow: уловки и примеры

 html {
 scroll-behavior: smooth;
 }
 #scrolltop {
 display: block;
 visibility: visible;
 opacity: 1;
 transition: visibility 0s, opacity 0.5s ease-in;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: rgba(255, 255, 255, 0.4);
 border-radius: 20%;
 }
 .top-button {
 text-decoration: none;
 cursor: pointer;
 padding: 30px;
 color: #222;
 }
 body {
 background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
 color: #fff;
 font-family: 'Quicksand', sans-serif;
 font-size: 24px;
 line-height: 1.4;
 text-align: center;
 padding: 40px;
 }
 .long-text {
 max-width: 700px;
 margin: 0 auto;
 padding: 40px;
 background: rgba(0, 0, 0, 0.2);
 }

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

Как создать кнопку прокрутки вверх с помощью jQuery

Вы можете добавить на свой веб-сайт кнопку с прокруткой вверх, используя следующий фрагмент кода:

HTML код

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>Back to top button using jQuery</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </head>
 <body>
 <!-- Back to top button -->
 <a id="button"></a>

 <!-- Some content to fill up the page -->
 <div class="content">
 <h1>Back to Top Button</h1>
 <h3>Scroll down the page</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 </div>
 <script type="text/javascript" src="script.js"></script>
 </body>
 </html>

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

 <a id="button"></a>

При нажатии этой кнопки страница прокручивается вверх. Это будет работать после добавления кода jQuery.

Код jQuery

Связанный: Узнайте, как создать элемент в jQuery

 // ===== Scroll to Top ====
 var btn = $('#button');
 // If the page is scrolled more than 300px,
 // show the scroll-to-top button
 // Otherwise hide the button
 $(window).scroll(function() {
 if ($(window).scrollTop() > 300) {
 btn.addClass('show');
 } else {
 btn.removeClass('show');
 }
 });
 btn.on('click', function(e) {
 e.preventDefault();
 $('html, body').animate({scrollTop:0}, '300');
 });

Здесь класс show добавляется к элементу кнопки, если пользователь прокручивает веб-страницу более чем на 300 пикселей. Этот класс шоу делает видимым элемент кнопки. По умолчанию видимость элемента кнопки скрыта. Более подробная информация о кнопке содержится в следующем коде CSS.

Код CSS

По теме: простые примеры кода CSS, которые вы можете изучить за 10 минут

 #button {
 display: inline-block;
 background-color: #FF9800;
 width: 50px;
 height: 50px;
 text-align: center;
 border-radius: 4px;
 position: fixed;
 bottom: 30px;
 right: 30px;
 transition: background-color .3s,
 opacity .5s, visibility .5s;
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
 }
 #button::after {
 content: "f077";
 font-family: FontAwesome;
 font-weight: normal;
 font-style: normal;
 font-size: 2em;
 line-height: 50px;
 color: #fff;
 }
 #button:hover {
 cursor: pointer;
 background-color: #333;
 }
 #button:active {
 background-color: #555;
 }
 #button.show {
 opacity: 1;
 visibility: visible;
 }
 /* Styles for the content section */
 .content {
 width: 77%;
 margin: 50px auto;
 font-family: 'Merriweather', serif;
 font-size: 17px;
 color: #6c767a;
 line-height: 1.9;
 }
 @media (min-width: 500px) {
 .content {
 width: 43%;
 }
 #button {
 margin: 30px;
 }
 }
 .content h1 {
 margin-bottom: -10px;
 color: #03a9f4;
 line-height: 1.5;
 }
 .content h3 {
 font-style: italic;
 color: #96a2a7;
 }

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

Теперь у вас есть полностью функциональная кнопка прокрутки вверх / назад. Если вы хотите взглянуть на полный исходный код, использованный в этой статье, вот его репозиторий на GitHub .

Примечание . Код, использованный в этой статье, лицензирован MIT .

Узнать больше о пользовательском опыте

Пользовательский опыт фокусируется на том, соответствует ли продукт потребностям своих пользователей. Если вы дизайнер или разработчик, вам следует следовать принципам UX-дизайна и создавать потрясающие продукты. Если это поле вас интересует, вы должны следовать правильному пути, чтобы начать работу.