Кнопка “наверх”

HTML + CSS простая кнопка – постоянно на экране, мгновенное перемещение в начало страницы

Более сложная кнопка – на этой и всех других страницах сайта HTML+CSS+jQuery
появляется после прокрутки 500px и исчезает если страница находится в начале

подключается в footer.php, соответственно работает для всех страниц сайта

Работает так

в файл footer.php помещается span с классом scroll-up

CSS и JS можно разместить здесь же либо в отдельных файлах (подключение в functions.php)

jQuery – при событии click элемента с классом scroll-up вызывается scrollTop:0 (нажатие на кнопку “наверх”)
При прокрутке страницы вниз более 500px к span добавляется класс active
класс active устанавливает bottom: 30px; – кнопка появляется на экране
Если прокрутка от верха менее 500px класс active убирается и в соответствии с классом scroll-up bottom: -500px; – кнопка исчезает

footer.php
....
<?php wp_footer(); ?>

<span class="scroll-up active">Наверх</span>

<script> 
  CSS здесь, либо в style.css темы, либо подключается в functions.php отдельным файлом
</script>

<style> 
  jQuery(function($) {...
  либо в общем js файле темы, либо подключается в functions.php отдельным файлом
</style>

</body>
</html>

HTML
<span class="scroll-up active">Наверх</span>

CSS
.scroll-up { 
    text-align: center;
    display: inline-block;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 17px;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    border-radius: 3px;
    bottom: 30px;
    transition: bottom 2s;
    position: fixed;
    right: 30px;
    bottom: -500px;
    cursor: pointer;
    z-index: 10;
}
.scroll-up.active {
    bottom: 30px;
}
.scroll-up::before {
    content: '';
    border: 8px solid transparent;
    border-bottom: 10px solid #b7b7b7;
    display: block;
    width: 0px;
    margin: 4px auto;
    margin-top: -6px;
}

jQuery
jQuery(function($) {

  // Для элемента с классом scroll-up
  // При нажатии на кнопку (событие click) перемещаемся в начало документа scrollTop:0
	$(document).on('click', '.scroll-up', function() {
		$('html, body').animate({scrollTop:0}, 500, 'swing');
		return false; 
	}); 

  // При скролле документа более 500px 
  // к элементу с классом scroll-up добавляется класс active 
  // - кнопка становится видимой на экране 30px от низа окна документа
  // 
  // .scroll-up.active {
  //   bottom: 30px;
  // }
  // 
  // При скролле документа менее 500px
  // класс active сбрасывается
  // кнопка скывается - bottom: -500px;
  // 
	$(document).scroll(function(e){
		var top = $(document).scrollTop(); 
		if (top > 500) {
			$('.scroll-up').addClass('active'); 
		} else {
			$('.scroll-up').removeClass('active');  
		} 
	});
})