Как сделать кнопку наверх: 2 способа

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

Всем привет! В данной статье вы узнаете как сделать кнопку наверх на чистом HTML и CSS с применением JavaScript.

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

Как сделать кнопку наверх на чистом HTML и CSS

Данный способ очень прост в применении, так как в нём используются только основные возможности CSS стилей. Однако, у данного способа есть недостаток: перемещение наверх происходит мгновенно и резко, что не очень красиво выглядит само по себе. К сожалению, для того, чтобы сделать перемещение более плавным одним CSS не обойтись и придётся использовать JS.

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Кнопка наверх на чистом HTML и CSS</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="container">
		<a href="#" class="toTopButton">&and;</a>
	</div>
</body>
</html>

Далее добавим немного стилей:

body {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.container {
	width: 100%;
	height: 2000px;
}

.toTopButton {
	display: block;
	border-radius: 10px;
	width: 50px;
	height: 50px;
	text-decoration: none;
	font-size: 36px;
	background-color: #262626;
	text-align: center;
	color: silver;
	position: fixed;
	right: 40px;
	bottom: 40px;
        transition: .3s;
}

.toTopButton:hover {
	color: #fff;
	background-color: grey;
}

Получим следующий результат:

Как сделать кнопку наверх

На этом кнопка наверх на чистом HTML и CSS готова.

А теперь посмотрим как будет работать кнопка на JavaScript

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

Весь код на HTML и CSS оставим. Остаётся лишь подключить к HTML файлу скрипт, в котором содержатся следующие строки:

let toTopButton = document.querySelector('.toTopButton')

toTopButton.addEventListener('click', toTop)

function toTop() {
	if (window.pageYOffset > 0) {
		window.scrollBy(0, -80)
		setTimeout(toTop, 0)
	}
}

В первой строке объявляем переменную toTopButton, в которую берём нашу кнопку, созданную ранее. На следующей строке добавляем слушатель события «клик» и действие, описанное в функции toTop() на следующих строках.

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

Как оказалось, сделать кнопку наверх не так уж и сложно. В данной статье описаны всего два способа её создания, однако, таких способов намного больше. Если вам интересно о них узнать, то пишите в комментариях, сделаем ещё одну статью:)

Оцените статью ниже и обязательно поделитесь в комментариях была ли статья полезной.

nikiteJke
Оцените автора
( Пока оценок нет )
Hack Life
Добавить комментарий