среда, 2 августа 2017 г.

Учим JavaScript. 29. Плавная прокрутка страницы вверх

index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<p class="text">
МОСКВА, 2 августа — РИА Новости, Мария Салтыкова. Самая дорогая в мире криптовалюта — биткоин, капитализация которой сейчас более 44 миллиардов долларов, 1 августа разделилась на две части: классический биткоин (BTC) и Bitcoin Cash (BCC). Это было сделано для того, чтобы оптимизировать работу системы для массовых пользователей, ускорив проведение платежей и снизив комиссии. Рынок криптовалют между тем все чаще сравнивают с финансовой пирамидой: по мнению Минэкономразвития России, курс биткоина может рухнуть в любой момент.
Биткоин не привязан к другим национальным валютам или активам, его ценность не подкрепляется ничем, кроме доверия его держателей. Курс валюты устанавливается на виртуальных биржах, где ее обменивают на реальные деньги. До 2011 года курс одного биткоина составлял менее 1 доллара, но затем начал расти. В ноябре-декабре 2013 года за один биткоин предлагали уже более 1,2 тысячи долларов. Однако уже через месяц цена упала более чем в пять раз.
Весной прошлого года курс опять пошел вверх, и к 12 июня 2017 года биткоин достиг исторического максимума — 3 тысячи долларов. По состоянию на 2 августа он стоит уже 2,7 тысячи долларов.
</p>
<button id="top">Top</button>
</body>
</html>

style.css
.text {
width: 15px;
}

#top {
position: fixed;
right: 30px;
bottom: 30px;
}

1.js
window.onload = function() {
// window.scrollTo(x, y) - Прокрутка документа до указанных координат.
var scrolled; // координата скрола
var timer;

document.getElementById('top').onclick = function() {
scrolled = window.pageYOffset; // pageYOffset - Величина прокрутки документа вниз.
//window.scrollTo(0, 0);
scrollToTop();
}

function scrollToTop() {
if(scrolled > 0) {
window.scrollTo(0, scrolled);
scrolled = scrolled - 100; // 100 - скорость прокрутки
timer = setTimeout(scrollToTop, 100);
}
else {
clearTimeout(timer);
window.scrollTo(0, 0);
}
}
}

Комментариев нет:

Отправить комментарий