Сегодня существует множество сайтов, на которых установлена кнопка «наверх». Назначение таких кнопок очевидно из названия — переход к началу страницы. Наличие подобных кнопок на сайте делает не только просмотр контента более удобным, но и привлекает посетителя. Вот я и решил установить себе такую. 
Простейшую кнопку можно сделать, используя только HTML, путем установки якоря. Такой способ я даже не стал рассматривать, так как, по-моему, смотрится это не очень. Ведь так? Я хотел, чтобы переход осуществлялся плавно, а не скачком. К тому же, мне хотелось не просто кнопку, а целую полосу (блок), находящийся с одной стороны страницы и занимающий всю ее высоту.
Потратив достаточно времени на поиски желаемого, я все-таки смог найти ту самую, которая удовлетворяла всем моим требованиям. Нашел я ее на сайте truemisha.ru, описание которой было вот в этой статье. Оценить эту кнопку можно на этой странице. А сейчас я предлагаю рассмотреть о том, как она устанавливается.Установка кнопки
Первым делом необходимо скачать архив с исходниками. В архиве находится три файла:
- top-button-jquery.html — пример страницы с кнопкой
- layout.css — файл со стилями
- button.js — файл с функциями для работы кнопки
P.S. Лично я содержимое файла layout.css не использовал. Все, что там было написано, я удалил и прописал свои стили.
Затем вставляем следующий HTML код перед закрывающимся тегом </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="button.js"></script> <div id="top-link"> <a href="#top">наверх</a> </div>
Обращаю внимание, что нужно указать правильный путь к файлу button.js в строке
<script src="button.js"></script>
Если не получается указать правильный путь, и Ваш сайт стоит на WordPress, можно облегчить себе задачу, поместив button.js в папку с текущей темой и вызвав функцию получения директории.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri() ?>/button.js"></script> <div id="top-link"> <a href="#top">наверх</a> </div>
Далее будем украшать кнопку средствами css. Так как каждый сайт имеет свой стиль, то тут нельзя точно сказать, что подойдет именно Вам. Могу только показать коды css исходников и те, которые я использую на моем сайте.
Исходный css код
#top-link{
cursor:pointer; /* изменяем указатель мыши при наведении на блок */
display:none; /* скрываем блок с кнопкой, т.к. отображать надо только при прокрутке */
position:fixed; /* фиксируем расположение */
left:0px;
top:0px;
padding:0;
}
#top-link a{
display:block;
}
Мой css код
#top-link {
cursor: pointer;
display: none;
position: fixed;
left: 0px;
top: 0px;
padding: 0;
z-index: 1;
}
#top-link:hover {
background: #ccc;
opacity: 0.5;
}
#top-link a {
display: block;
width: 100px;
background: url(./UpArrow.png) no-repeat 50% 50%; /*Стрелка, расположенная по центру*/
padding: 5px 0;
margin: 5px;
margin-top: 10px;
text-decoration: none !important;
opacity: 0.5;
}
#top-link:hover a {
opacity: 1;
}
Если Вы все сделали правильно, можете наслаждаться результатом, если же что-нибудь не получается, можете задать вопрос в комментариях под этой статьей или же здесь. А на этом все. Удачи Вам!
