Как сделать кнопку «наверх» с использованием CSS3 и jQuery

Have a question? Ask in chat with AI!

кнопка наверхЯ думаю тема не новая. Многие уже видели и знают как сделать кнопку «Наверх», которая бы плавно прокручивала страницу к верху. Видел несколько вариантов, но все они не впечатлили. А вот вчера попался довольно интересный и грамотно сделанный вариант. Интересен прежде всего минимализмом и использованием CSS3, по которому я пишу цикл статей CSS3 Для начинающих. В данном примере используются свойства CSS3 transition и border-radius, а так же jQuery для наведения красоты.

[adsense]
Как выглядит эта кнопка в действии вы можете посмотреть у меня на сайте. Я ее немного переделал под свои нужды. При желании я думаю сможете и вы. Сейчас я хочу вам привести перевод англоязычной статьи.

Для того чтобы сделать кнопку «наверх» нам понадобится заготовка — стрелка отрисованная где вам удобно. Если рисовать не хотите — можете скачать готовую тут.
кнопка наверх

Подготовим CSS стили для кнопки:

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

В принципе для того чтобы кнопка заработала достаточно сделать следующее:

  • прописать эти стили в файле css вашей темы
  • скопировать картинку со стрелкой в нужную папку (не забудьте поменять параметр у стиля #back-top span)
  • в файлы index.php, single.php, page.php, archive.php, author.php, category.php, tag.php вашей темы после цикла loop прописать следующее:
    
    

    К началу

Это простой вариант без «украшательств». А если быть точнее без использования jQuery.
Если использовать jQuery, то мы во-первых можем добиться плавного прокручивания страницы к верху, а во-вторых, показывать нашу кнопку «вверх» только тогда, когда мы использовали скрол вниз. То есть при загрузке страницы кнопки видно не будет. Как только посетитель сайта начнет пролистывать сайт вниз — кнопка появится.

Для использования библиотеки jQuery нам требуется ее подключить. Сделать это можно в файле header.php вашей темы. Если данная библиотека у вас уже подключена, то повторно подключать ее не нужно. Итак, для подключения библиотеки jQuery в файл header.php нужно вставить следующую строку:

После подключения бибилиотеки, мы возвращаемся в файлы
index.php, single.php, page.php, archive.php, author.php, category.php,
tag.php и сразу же после кода нашей кнопки вставляем следующий JavaScript код:

После данных манипуляций вы должны получить плавно появляющуюся кнопку, при наведении мышки на нее она должна становиться более темной. Прокрутка страницы должна быть плавной. В начале страницы кнопка не должна быть видна.

Статья делаем кнопку «Вверх» двумя способами предлагает вам еще два решения для создания кнопки «Вверх.»

Если вы присматриваете земельный участок или коттедж по каширскому шоссе, то загляните на сайт компании «Инвест-недвижимость» http://www.invst.ru/kashirskoe.php.

На этом данную статью заканчиваю. Остались вопросы? Задавайте их в комментариях. Удачного дня!


25 комментариев для “0

  1. Уведомление: Как сделать кнопку «наверх» с использованием CSS3 и jQuery | Grabr
  2. Уведомление: Делаем кнопку «Вверх» двумя способами | Полезные советы вебмастеру
      1. а как сделать такую же кнопку, ( я имею ввиду прилипшую ) только чтоб
        при нажатии на нее , осуществлялся переход на какую либо определенную
        страницу сайта ?

        1. обратите внимание на эту статью http://www.rusdigi.org/js/panel-trendov-s-pomoshhyu-css-i-jquery.htmlвторой вариант — поменяйте в ссылке a атрибут href на нужный вам 

          1. скопируйте ссылку  и удалите слово «второй» после «.html»

  3. Руслан, спасибо за интересную и самое главное полезную статью. Но при реализации возник вопрос — как сделать так, что в Opera при загрузке странице эта кнопка была невидима. В Chrome все работает ok, а Opera выполняет $(«#back-top»).hide(); только после того как страница полностью загрузится… Во время загрузки кнопка торчит на своем месте. Что есть не очень красиво ((

    Использую Opera 11.10

    Если подскажете решение проблемы — буду очень благодарен 🙂

    1. можно поиграть с css у блока back-top: поставить display:none, а при скроле делать display:block с помощью java

      1. Мне почему то сразу же пришла в голову похожая мысль. Я изначально сделал ее свойство visibility:hidden. А в $(document).ready изменил ее visibility на visible и все стало адекватно 🙂

  4. Спасибо! Поставил пока что только на главную страницу.
    Хочу заметить, что loop у меня вообще небыло, пришлось вставить перед дивом, отвечающим за навигацию по сайту.
    Использовал jquery 1.6 а не 1.4.3, как вы предлагайте) Все работает 😉
    Еще раз спасибо! Сейчас буду кастомизировать под себя))

    1. на момент написания статьи стейбл была 1.4.3 — очень часто они обновляться стали)

  5. Уведомление: | Строим вместе с нами
  6. Спасибо большое. Никакой плагин не хотел работать. Данный способ заработал сразу! =)

  7. Спасибо большое! Что бы я без вас делал 🙂 Хороший скрипт, а главное можно без особого труда подогнать под себя!

  8. Можно ли сделать, чтобы кнопка появлялась, например, после скорллинга 400px?

    1. к сожалению не могу сказать что-то конкретное по xslt т.к. не сталкивался

  9. Уведомление: Кнопка вверх на сайте с wordpress - варианты изготовления | Деньги в сети

Добавить комментарий для RaxenNT Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Вышла новая stable версия Google Chrome 10.0.648.205
Следующая запись CSS3 для начинающих. Часть 3.1. Красивая типографика для сайта с помощью CSS3.