Допустим, страница поделена на три блока: header, main и footer.
Тогда, кнопка "наверх" должна быть последним элементом внутри main.
<header>
<p>Хедер</p>
</header>
<main>
<p>Пример контента</p>
<a id="page_up_down_button" href="#">Наверх</a>
</main>
<footer>
<p>Футер</p>
</footer>
В CSS, кнопке можно прописать:
#page_up_down_button {
position: sticky;
bottom: 0;
}
Ну и соответствующие стили, чтобы имитировать кнопку.
Пример скрипта с использованием JQuery, чтобы кнопка могла возвращать не только наверх, но и на место откуда ею воспользовались:
<script type="text/javascript">
var scroll_position = null;
$('#page_up_down_button').click(function(){
if ($(document).scrollTop() > 0) {
scroll_position = $(document).scrollTop();
$('#page_up_down_button').html('Обратно');
return true;
} else if (scroll_position > $(document).scrollTop()) {
$(document).scrollTop(scroll_position);
$('#page_up_down_button').html('Наверх');
return false;
};
});
function check_status_button(){
if ($(document).scrollTop() > 0) {
scroll_position = null;
$('#page_up_down_button').html('Наверх');
};
};
$(window).resize(function() {
check_status_button();
});
$(window).scroll(function() {
check_status_button();
});
</script>
Скрипт лучше размещать ниже кнопки.
Для работы кнопки, естественно нужно подключить JQuery до скрипта, а лучше в head страницы.
Например, так:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
