Кнопка "Наверх" обеспечит нам возможность плавного перемещения (delay) к шапке сайта. По умолчанию кнопка не видна, но при прохождении указанного количества пикселей (showButton), отображается.
Вставляем кусок разметки где угодно, хоть сразу после body.
<div id="buttonToTop">Наверх</div>
Вставляем скрипт как удобно - в хидере, в файле и т.д.
<script type="text/javascript">
const showButton = 150;
const delay = 500;
$(document).ready(function(){
$(window).scroll(function () {
if($(this).scrollTop() > showButton) {
$('#buttonToTop').fadeIn();
}else{
$('#buttonToTop').fadeOut();
}
});
$('#buttonToTop').click(function () {
$('body, html').animate({
scrollTop: 0
}, delay);
});
});
</script>
Базовый стиль для примера. Можно под себя подогнать, главное, оставить display: none;
<style>
#buttonToTop {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
font-size: 150%;
}
</style>