Кнопка вверх

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

HTML

       <div id="go-top" style="opacity: 1;">
		<div>
		<a class="scrollto display-off" href="#home">
		ВВЕРХ
		</a>
    	        </div>
	</div>

В CSS пишем для нее стили.

CSS

#go-top {
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 10px;
	font-size: 30px;}
.scrollto {
	color: #0f2554;}

В JS пишем код плавной прокрутки.

JS

const anchors = document.querySelectorAll('a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href').substr(1)
    
    document.getElementById(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

Теперь в Header ставим якорь до которого эта кнопка будет поднимать.

HTML

<a id="home"></a>

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

Вместо текста можно разместить любую иконку из FontAwesome, соответственно подключив его в заранее.

HTML

        <div id="go-top" style="opacity: 1;">
		<div>
		<a class="scrollto display-off" href="#home">
		<i class="fas fa-chevron-up"></i>
		</a>
    	        </div>
	</div>

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

JS

<script>
jQuery(function($) {
	$(window).scroll(function(){
	if($(this).scrollTop()>10){
	$('a.scrollto').removeClass('display-off');
	$('a.scrollto').addClass('display-on');
	}
	else if ($(this).scrollTop()<10){
	$('a.scrollto').removeClass('display-on');
	$('a.scrollto').addClass('display-off');
	}
	});
	});
</script>

При этом нужно добавить стили для display-off и display-on. Можно и с плавным появлением и исчезновением - transition: 0.5s;

CSS

.display-on {
	opacity: 1;
	transition: 0.5s;}
.display-off {
	opacity: 0;
	transition: 0.5s;}