Как сделать кнопку «Наверх»?

Кнопка «Наверх» является неотъемлемым атрибутом качественного сайта. Её можно сделать в разных вариациях, но желательно в виде собственно кнопки. Кнопка «Наверх» привязывается к определённому месту на экране, например правый верхний угол.

Напишем код:

Код:

<div id="top"></div>

<!—Так необходимый для каждого сайта океан контента -->

<a href="#top">Наверх</a>

При нажатии на ссылку нас перенесёт на элемент, в котором наличествует id="top", а именно div на представленном куске коде. Если он расположен непосредственно после body, то это и получиться верх нашей страницы.

Существует более удобный и короткий в написании способ, но с использованием JavaScript:

Код:

<a href="javascript:scroll(0,0);">Наверх</a>

Как и в первом случае, при нажатии переходим к верху страницы. Плюсом является то, что отсутствует необходимость создавать пустые div с нужным id, соответственно написанный код выходит короче. Минусом является необходимость JavaScript, который расшифровывают не все браузеры.

 

Можно ещё анимацию прикрутить на jQuery.

Код:

$(document).ready(function() {
$("a.scrollto").click(function() {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({
scrollTop: destination
}, 800);
return false;
});
});

HTML:

<h1 id="m1">Текст</h1>
<a href="#m1" class="scrollto">ВВЕРХ</a>