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

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


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

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

Подготовим 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.

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



Запись опубликована в рубрике CSS3, JavaScript с метками , , , , . Добавьте в закладки постоянную ссылку.

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

  1. Уведомление: Как сделать кнопку «наверх» с использованием CSS3 и jQuery | Grabr

  2. Уведомление: Делаем кнопку «Вверх» двумя способами | Полезные советы вебмастеру

  3. Сергей говорит:

    Спасибо!

    • Гилязетдинов Руслан говорит:

      пожалуйста — заходите почаще)

      • Роман говорит:

        а как сделать такую же кнопку, ( я имею ввиду прилипшую ) только чтоб
        при нажатии на нее , осуществлялся переход на какую либо определенную
        страницу сайта ?

        • Гилязетдинов Руслан говорит:

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

          • Роман говорит:

             по ссылке пусто

          • Bighamburger говорит:

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

  4. Ya говорит:

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

    Использую Opera 11.10

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

    • Гилязетдинов Руслан говорит:

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

      • Ya говорит:

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

        • Гилязетдинов Руслан говорит:

          учтите только, что visibility не работает в IE 6-7

  5. Atamovich говорит:

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

    • Гилязетдинов Руслан говорит:

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

  6. Андрей говорит:

    Вот мой пример создание top#
    displanet.ru/blog/6-delaem-knopku-naverh.html

  7. Yakov The Smart говорит:

    Спасибо за статью. То, что искал.

    • Гилязетдинов Руслан говорит:

      рад, что статья оказалась полезной

  8. Уведомление: | Строим вместе с нами

  9. Лена Колпакова говорит:

    Спасибо большое. Никакой плагин не хотел работать. Данный способ заработал сразу! =)

  10. Аноним говорит:

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

  11. Naiko Michail говорит:

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

  12. RaxenNT говорит:

    Подскажите пожалуйста, как сделать чтоб в xslt работал скрипт?

    • Гилязетдинов Руслан говорит:

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

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

  14. zet10 говорит:

    спасибо

Добавить комментарий

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