Как сделать кнопку Наверх для сайта? Способ на Javascript

Думаю, что уже многие успели полюбить кнопку «Наверх» на том же ВКонтакте.

На одном из моих заказов клиент захотел иметь точно такую же кнопку для сайта.

После довольно длительных поисков готового решения в Интернете я понял, что ничего хорошего не найти.

Я стал разбираться в исходных кодах всех подключенных скриптов в самой социальной сети ВКонтакте, но натолкнулся на довольно большой кусок кода, отвечающего за данную функцию. Чем больше размер файлов — тем хуже.

Пришлось обратиться к системным файлам Google. В его библиотеках для собственного использования я нашел довольно простой способ реализации переброса пользователя Наверх страницы. Но в отличие от ВКонтакте, у Google этот процесс выглядит более красиво — с плавным прокручиванием.

Установить кнопку Наверх для сайта

Я свел все действия до минимума. Чтобы установить кнопку Наверх для сайта Вам надо вставить всего одну строку перед закрывающим тегом </HEAD> в HTML коде страницы.

Вот и сама строка кода:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="goto_top">&#9650; Наверх</div>

Чтобы задать стиль кнопки (например цвет), добавьте в файл стилей вашего сайта тег:

#goto_top

Для примера вот Вам готовый нейтральный стиль кнопки:

#goto_top {
padding:8px 13px;
background:#c0c0c0; font:bold 16px verdana, arial, helvetica, sans-serif;
text-shadow:0 2px 0 #008000;
color:#fff;
position:fixed;
z-index:-1;
top:0; left:0;
width:30%;
height:100%;
cursor:pointer; display:none; border:0px;
}