DVV,
<!DOCTYPE html>
<html lang="ru">
<head>
<title>T-Task</title>
<style type="text/css">
p {
height: 2000px;
}
.top-arrow {
position: fixed;
display: none;
top: 10px;
right: 10px;
}
.top-arrow.top-arrow--show {
display: block;
}
</style>
</head>
<body>
<p></p>
<button class="btn top-arrow">вверх</button>
<script>
function scrollToTop() {
const body = document.getElementsByTagName('body')[0];
const topArrow = document.querySelector('.top-arrow');
let scrolled;
let timer;
topArrow.onclick = () => {
scrolled = window.pageYOffset;
scrollToTop();
}
window.addEventListener('scroll', function() {
getWindowScrollTop(this);
});
function scrollToTop() {
clearTimeout(timer);
if (scrolled > 0) {
scrolled = scrolled - 15;
timer = setTimeout(scrollToTop, 10);
}
window.scrollTo(0, scrolled);
}
function getWindowScrollTop(el) {
topArrow.classList.toggle('top-arrow--show', el.pageYOffset >= 300)
}
};
scrollToTop()
</script>
</body>
</html>