Как сделать кнопку «наверх» для сайта или блога? Установить кнопку наверх на сайт.

Как сделать кнопку «наверх» для сайта?

13

Августа
Здравствуйте, уважаемые читатели моего «сайто-блога», подписчики, друзья и все те, кто зашёл ко мне в поисках информации! Сегодня я расскажу, как сделать кнопку «наверх» для сайта или блога. Как установить кнопку «наверх» на любой сайт? Кнопка «наверх» для Wordpress.

Думаю, всем понятна суть этой кнопочки. Читая длинный, интересный пост на вашем сайте, посетитель доходит до конца странички, и, чтобы ему потом долго-долго не крутить колёсико мышки, он нажимает на кнопку «наверх» и мгновенно оказывается в начале страницы, где главное меню в его распоряжении.

Вот и я загорелся идеей поставить на сайт кнопку «наверх». Немного посидев в интернете, нашёл много информации по установки кнопки «наверх» на блог Wordpress, но у меня-то сайт самописанный… Пришлось самому и писать скрипт кнопки «наверх» для сайта! В итоге, мой скрипт отлично подходит для установки на любой сайт или блог!

Устанавливаем кнопку «наверх» на сайт:

В конце этой статьи скачайте архив с двумя файлами: готовой html-страничкой и картинкой (стрелочка «наверх»). Вы можете открыть html-страничку в любом браузере и посмотреть работу кнопки «наверх».

1. Работу начнём с javascript кода:
ВНИМАНИЕ! Для работы скрипта требуется подключить библиотеку jquery, перед js-кодом. Если она у вас уже подключена, то вставьте этот код в главный файл вашего сайта между тегами head. Обычно, главный файл это index.html, index.php. Для блога Wordpress рекомендую вставить в файл header.php шаблона вашего сайта. Если у вас простой статичный html-сайт, то вставить нужно будет на каждую страницу.

2. Добавляем кнопке «наверх» стили, css-код:
```
/* knopka na verh
-----------------------------------------------------------*/
#back-top {
	position: fixed;
	bottom: 0px;
	right: 15px;
	z-index:999;
}
#back-top a {
	width: 100px;
	display: block;
	text-align: left;
	font: 14px/100% Verdana;
	text-decoration: none;
	color: #fff;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #fff;
}
/* arrow icon (span tag) */
#back-top span {
	width: 100px;
	height: 30px;
	display: block;
	margin-bottom: 7px;
	line-height:30px;
	background: #777 url(up-arrow.png) no-repeat center center;
	opacity:0.7;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
	opacity:1;
}
```
Вставьте этот css-код в таблицу стилей style.css вашего сайта, либо шаблона вашего сайта. Для блогов, сделанных на wordpress этот файл находится в папке с темой (wp-content/themes/ваша_тема/style.css).

3. Добавляем html-код кнопки «наверх»:
```
	
		  Наверх
	
```
Поместите его в основном шаблоне вашего сайта, перед закрывающим тегом body. Для Wordpress-блогов рекомендую его вставить в файл footer.php в тело. Если у вас простой html-сайт, то вставьте его в каждую страничку.

4. В архиве есть картинка (стрелочка «наверх»), закиньте её в корень своего сайта. Если, кто не знает, это основная папка, в которой находятся все файлы вашего сайта. Обычно она называется httpdocs или public_html.

Вот и всё! Обновите страничку, своего сайта или блога, в правом нижнем углу должна появиться кнопка «наверх» при прокрутке колёсика мышки вниз. Вы можете изменить дизайн кнопки, пофантазировав со стилями css, поменять картинку на свою и т.д.

Теперь и вы знаете, как сделать кнопку «наверх» для сайта и блога, как установить кнопку «наверх» на любой сайт. Если у вас появились вопросы, задавайте в комментариях. Постараюсь ответить на все!

Сегодня в рубрику «Мотивация – путь к успеху» я помещаю такую картинку:

Как вам статья? Надеюсь, была интересна тема: «как сделать кнопку «наверх» для сайта и блога» и статья была полезной. Не забудьте подписаться на обновление моего сайта по e-mail, чтобы не пропустить выход новых интересных постов и участвовать в классном конкурсе. Всем пока! Пока!
Скачать бесплатно!

На этом всё. С уважением, Павел Макаров.
P.S. Буду рад комментариям к этому посту.

Комментарии

21
Вы можете авторизироваться!
- 13 Апреля 2013 14:44
 Ася
 
 огромное спасибо за понятное и подробное объяснение!!!
 Ответить
 - 05 Мая 2013 17:07
 Павел Макаров
 
 Не за что Ася! Рад, что статья и приведённый код кнопки «наверх» для сайта были для вас полезны и понятны! :)
 Ответить
- 19 Августа 2013 07:32
 Дмитрий
 
 Спасибо. давно искал:)
 Ответить
- 09 Сентября 2013 14:58
 Lyuba
 
 Спасибо за код. В браузере Chrome отображается все отлично, а вот Explorer ничего не показывает...
 Ответить
 - 16 Октября 2013 11:04
 Павел Макаров
 
 Lyuba, скажите пожалуйста, в какой версии IE Вы тестировали?
 Ответить
- 12 Октября 2013 05:09
 Dima
 
 Большое спасибо за кнопку "Наверх" - видел несколько описаний, у Вас считаю лучшим! - все ясно и понятно. Единственное, можно упростить код - <a href="#top"> Наверх<a> не обязательно помещать в тег Объективно говоря, тег вообще не нужен. Можно сделать так <a href="#top" id="back-top"> Наверх<a> И под это дело поправить стили CSS и скрипт.
 Ответить
 - 16 Октября 2013 11:00
 Павел Макаров
 
 Здравствуйте Дима!
 Согласен с Вами, такое упрощение разумно! Спасибо! :)
 Ответить
- 12 Декабря 2013 12:16
 Олег
 
 Вот это супер, спасибо, все четко и понятно!!!! У меня получилось. Система Битрикс.
 Ответить
 - 14 Декабря 2013 16:18
 Павел Макаров
 
 Олег, благодарю за оставленный комментарий! )) В системе Битрикс код работает отлично, сам неоднократно устанавливал его на интернет-магазины.
 Ответить
- 04 Января 2014 17:52
 Илья
 
 Здравствуйте Павел, прочитал вашу статью, захотелось установить кнопку, но мой сайт создан на базе конструктора сайтов Setup.ru. Подскажите, для правильной работы, где размещать код, и будет ли он вообе работоспособным?
 Ответить
 - 08 Января 2014 11:30
 Павел Макаров
 
 Здравствуйте Илья!
 Сложно говорить о конструкторах... Я с ними не работаю. Чтобы установить эту кнопку "Наверх", Вам нужно узнать, возможно ли редактировать исходный код страниц вашего сайта, возможно ли создание javascript и css файлов. Если есть файл шаблона сайта, то html-код кнопки "наверх" размещаем там перед закрывающим тегом </body>, иначе на каждой html-странице сайта. Подключаем css и js код. Кнопка будет работоспособна т.к. не содержит php-кода, который обычно блокируется web-конструкторами. За подробностями советую обратиться в тех. поддержку вашего конструктора сайтов.
 Ответить
- 04 Февраля 2014 17:55
 Евгений
 
 Изложено грамотно и просто. Спасибо автору за статью!
 Ответить
- 27 Февраля 2014 10:36
 Марина
 
 статья интересная-но для работы с вордпресс много статей а для блоггера статей мало таких профессиональных ,а я абсолютный \"чайник \"только учусь -так что уйма времени уходит на \"простые\" вещи
 Ответить
- 23 Февраля 2015 09:04
 DimJP
 
 Все понятно но у меня к сожалению не работает. Когда страница не длинная он работает когда с прокруткой не работает!
 Ответить
 - 03 Марта 2015 19:39
 Павел Макаров
 
 DimJP, дайте пожалуйста ссылку на страничку, где Вы установили код кнопки «Наверх».
 Ответить
- 11 Марта 2015 23:12
 VVV
 
 Спасибо всё работает!!! Долго искал как вставить себе на сайт кнопку на верх. Всё просто и понятно. Спасибо ОГРОМНОЕ.
 Ответить
- 03 Сентября 2015 09:53
 Анатолий
 
 Огромное спасибо, земляк! Все работает, установил на сайте с использованием конструктора Presence Builder.
 Ответить
- 27 Октября 2015 12:34
 Александр
 
 Спасибо чувак!!
 Ответить
- 28 Апреля 2016 14:57
 Кирилл
 
 Редко комментирую! Но и редко так четко все с первого раза получается) Спасибо Вам;)
 Ответить
- 28 Июля 2016 18:26
 Саныч
 
 Наконец-то я нашёл ту реализацию которая мне нужна. Как сдвинуть скролл в начальную позицию я итак знал, а вот как сделать так, что бы всё происходило плавно без резких движений... Не понятно было каким образом это реализуется теперь буду знать. Статья понравилась! Всё изложено чётка и по делу. А то на других блогах предлагают всякую ерунду плагины какие-то)) Зачем для такого примитива нужен плагин не понятно.
 Ответить
- 01 Августа 2016 17:10
 Марк Простой
 
 по мне так не плохо. Максимально просто для нынешних возможностей. Спасибо за статью . думаю реализовать этот момент на своем сайте http://myoi.ru
 Ответить
- Ваш комментарий:

Как сделать кнопку «наверх» для сайта?

Комментарии

Ася

Дмитрий

Lyuba

Dima

Олег

Илья

Евгений

Марина

DimJP

VVV

Анатолий

Александр

Кирилл

Саныч

Марк Простой