Сегодня в этом блоге вы узнаете, как создать кнопку прокрутки вверх или назад, используя только HTML и CSS. В настоящее время на каждом блоге и веб-сайте есть отдельная кнопка для возврата в начало веб-страницы. Когда мы читаем или смотрим контент на веб-сайте, мы начинаем прокручивать страницу вниз, чтобы увидеть больше контента, но часто нам хочется вернуться на верхнюю часть. Чтобы вернуться к началу веб-страницы, нам нужно прокрутить страницу вверх, но большинство веб-сайтов используют кнопку, чтобы вернуться наверх одним щелчком мыши.
Вы могли видеть на многих веб-сайтах, что есть функция «Прокрутка вверх» или «Вверх», которая создана с использованием HTML CSS и Javascript. Это довольно хорошая функция, которая экономит несколько секунд вашим посетителям или пользователям.
Если вам трудно понять, что я говорю. Вы можете посмотреть полный видео-учебник по этой программе (кнопка «Прокрутить вверх» или «Вверх»).
Видеоруководство по кнопке «Наверх» с использованием HTML и CSS
Я надеюсь, вы поняли основные коды и концепции, лежащие в основе создания кнопок «Наверх» или «Прокрутка вверх». Как вы видели в видео, это программа на чистом CSS, что означает, что для создания этой программы использовались только HTML и CSS.
Если вам нравится эта программа (кнопка «Прокрутить вверх» или «Вверх») и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Кнопка прокрутки вверх или кнопка «Вверх» [Исходные коды]
Как всегда, перед тем, как поделиться кодами этой программы (кнопка «Прокрутить вверх» или «Вверх»). Несколько слов об основных тегах и кодах этой программы. Как вы видели в видео, сначала я создал тег <nav> для панели навигации веб-страницы. Затем внутри тега <nav> я создал тег <div> с именем класса «логотип» для логотипа. После этого я создал еще один тег <div> с именем класса «content» и поместил в него все остальные теги.
Точно так же внутри тега «content» имени <div> я создал несколько тегов <h1>, <h2>, <p>, <ul> и <li> для вставки или отображения фиктивного текста. В файле CSS сначала я дал документу margin:0; и padding:0; используя * (универсальный селектор), который браузер принимает по умолчанию. Затем я сделал стиль для панели навигации, текстов и т. д.
В HTML-файле я снова создал тег <div> с именем класса «стрелка-кнопка» и поместил внутрь него теги <a> и <span>. Внутри тега <span> я использовал красивое шрифтовое имя класса для отображения значка со стрелкой. В файле CSS я применил стиль к этому значку, чтобы создать верхнюю кнопку прокрутки. Наконец, я взял HTML-селектор и вставил в него scroll-behavior: smooth; значение для показа плавного эффекта при нажатии кнопки.
Чтобы создать эту программу (кнопка прокрутки вверх или назад). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Scroll to Top Button | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="arrow">
<a href="#" title="Back to Top"><span class="fas fa-angle-up"></span></a>
</div>
<nav>
<div class="logo">
CodingNepal
</div>
</nav>
Scroll to Top Button
</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi iure exercitationem illum omnis officiis quae magnam praesentium neque amet cum necessitatibus aliquid illo minus inventore voluptate reiciendis debitis, consequuntur libero ducimus cumque, quis totam quidem beatae in. Excepturi non culpa enim nesciunt iste molestias aperiam possimus, suscipit blanditiis corporis. Fugit eius, possimus. Nostrum fugit, animi voluptatibus quia reprehenderit perferendis culpa sint doloremque sapiente, vel explicabo veritatis quasi dolore necessitatibus rerum libero aperiam facilis a repellendus. Sed sint laboriosam odit itaque sequi corporis, consectetur amet, tenetur aspernatur, optio iure atque, asperiores quisquam eveniet laborum porro reiciendis expedita aperiam. Ipsum, ex eum, corporis odit perspiciatis eaque blanditiis reprehenderit quaerat fugit culpa voluptatum, cupiditate distinctio placeat. Temporibus enim ratione iste reiciendis, vitae et repudiandae ex obcaecati doloribus modi molestias facilis, recusandae adipisci nisi aperiam suscipit mollitia, aliquam! Iste sunt consequuntur modi quis mollitia, pariatur velit deserunt tempora magni id, tempore sint suscipit numquam!
</p>
<h2>
About Section
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deleniti molestias natus vero sed, officia, doloremque quod reiciendis cumque labore exercitationem cupiditate suscipit iusto. Repellendus consequatur, iste deleniti consequuntur eius perspiciatis culpa temporibus cum nobis placeat inventore similique modi cumque dignissimos! Numquam accusamus eveniet animi vero, temporibus minus, nostrum, a pariatur ab repudiandae deleniti ratione eligendi quae ipsam fugit ullam ipsum ad ipsa tempore, adipisci sunt optio nemo earum. Repellat corporis nobis pariatur amet facilis, nisi rem voluptates obcaecati nesciunt dolore non et alias magni recusandae praesentium explicabo. Blanditiis amet nesciunt tenetur aliquid est aperiam pariatur itaque incidunt dolorum deserunt?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deleniti molestias natus vero sed, officia, doloremque quod reiciendis cumque labore exercitationem cupiditate suscipit iusto. Repellendus consequatur, iste deleniti consequuntur eius perspiciatis culpa temporibus cum nobis placeat inventore similique modi cumque dignissimos! Numquam accusamus eveniet animi vero, temporibus minus, nostrum, a pariatur ab repudiandae deleniti ratione eligendi quae ipsam fugit ullam ipsum ad ipsa tempore, adipisci sunt optio nemo earum. Repellat corporis nobis pariatur amet facilis, nisi rem voluptates obcaecati nesciunt dolore non et alias magni recusandae praesentium explicabo. Blanditiis amet nesciunt tenetur aliquid est aperiam pariatur itaque incidunt dolorum deserunt?
<li>List item 2</li>
</p>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
html{
scroll-behavior: smooth;
}
nav{
height: 70px;
width: 100%;
background: #1b1b1b;
}
nav .logo{
padding-left: 100px;
line-height: 70px;
color: #f2f2f2;
font-size: 30px;
font-weight: 600;
font-family: 'Poppins',sans-serif;
}
.content{
position: relative;
top: 10px;
font-size: 40px;
}
.content p{
padding: 10px 0;
font-size: 17px;
text-align: justify;
}
.content h2{
font-size: 35px;
}
.content ul{
padding-left: 30px;
}
ul li{
font-size: 20px;
}
.arrow{
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}
.arrow a{
height: 39px;
width: 37px;
text-align: center;
background: #1b1b1b;
display: block;
border-radius: 3px;
}
.arrow a span{
font-size: 25px;
line-height: 39px;
cursor: pointer;
}
Вот и все, теперь вы успешно создали кнопку прокрутки вверх или назад вверх с помощью HTML и CSS. Если ваш код не работает или вы столкнулись с какими-либо ошибками/проблемами, прокомментируйте или свяжитесь с нами со страницы контактов.