Сегодня существует множество сайтов, на которых установлена кнопка «наверх». Назначение таких кнопок очевидно из названия — переход к началу страницы. Наличие подобных кнопок на сайте делает не только просмотр контента более удобным, но и привлекает посетителя. Вот я и решил установить себе такую.
Простейшую кнопку можно сделать, используя только HTML, путем установки якоря. Такой способ я даже не стал рассматривать, так как, по-моему, смотрится это не очень. Ведь так? Я хотел, чтобы переход осуществлялся плавно, а не скачком. К тому же, мне хотелось не просто кнопку, а целую полосу (блок), находящийся с одной стороны страницы и занимающий всю ее высоту.
Потратив достаточно времени на поиски желаемого, я все-таки смог найти ту самую, которая удовлетворяла всем моим требованиям. Нашел я ее на сайте truemisha.ru, описание которой было вот в этой статье. Оценить эту кнопку можно на этой странице. А сейчас я предлагаю рассмотреть о том, как она устанавливается.
Первым делом необходимо скачать архив с исходниками. В архиве находится три файла:
- top-button-jquery.html — пример страницы с кнопкой
- layout.css — файл со стилями
- button.js — файл с функциями для работы кнопки
P.S. Лично я содержимое файла layout.css не использовал. Все, что там было написано, я удалил и прописал свои стили.
Затем вставляем следующий HTML код перед закрывающимся тегом </body>
Обращаю внимание, что нужно указать правильный путь к файлу button.js в строке
Если не получается указать правильный путь, и Ваш сайт стоит на WordPress, можно облегчить себе задачу, поместив button.js в папку с текущей темой и вызвав функцию получения директории.
Далее будем украшать кнопку средствами css. Так как каждый сайт имеет свой стиль, то тут нельзя точно сказать, что подойдет именно Вам. Могу только показать коды css исходников и те, которые я использую на моем сайте.
Исходный css код
Мой css код
Если Вы все сделали правильно, можете наслаждаться результатом, если же что-нибудь не получается, можете задать вопрос в комментариях под этой статьей или же здесь. А на этом все. Удачи Вам!
4 отзыва на “ Кнопка «Наверх» для сайта на jQuery ”
Вы видели, как выглядит Ваша страница в Оpera?
Спасибо, что обратили внимание, но у меня все нормально, даже в Opera. Выкладываю скрин. Так что, думаю, проблема в Вашем браузере.
Opera? Этот браузер давно погиб уже
Согласен. К примеру, я скачал его сразу после того, как увидел этот комментарий.
