Блог
Анны Фёдоровой Как зарабатывать в интернете и на своём блоге?

Делаем кнопку наверх без плагина

2014.01.05
Автор:

Здравствуйте уважаемые читатели блога! Тема сегодняшней статьи – кнопка наверх без плагинов.

кнопка наверх без плагина

Кнопка наверх прежде всего нужна для удобства посетителей вашего сайта. Дочитав длинную статью, читателю приходится долго крутить колесо мышки, что надоедает и нередко утомляет. А с помощью кнопки наверх можно очень быстро перемещаться в верхнюю часть экрана одним нажатием. К тому же данная кнопка повышает юзабилити блога,что непременно является плюсом. Так же как и смайлы в комментариях. Мне кажется, кнопка вверх должна быть на каждом блоге, тем более что устанавливается она очень быстро и просто.

Для того, чтобы сделать кнопку наверх без плагинов, нужно сделать несколько шагов:

1). Скачайте следующий архив с двумя файлами по ссылке. В этом архиве находится файл top.js (файл скрипта) и top.gif (изображение стрелки). Их нужно распаковать и загрузить на хостинг. Файл top.js я загрузила в корневую папку блога (главная папка) public html. А top.gif – картинку загрузила в папку images.

2). Далее сделайте резервную копию файлов, которые будете изменять далее, чтобы можно было легко восстановить работоспособность блога, в случае возникновения ошибки.

Копируем код:


 

и вставляем его в footer.php перед тегом </body>. И вставьте адрес своего сайта вместо указанной строчки.

3). В файле style.css в админ. панели в самом конце вставляем этот код:

4). Теперь смотрим, работает ли кнопка.

кнопка наверх

Не все шаблоны поддерживают данный функционал. Поэтому если кнопка наверх не работает или вы хотите, чтобы она прокручивалась плавно, нужно подключить библиотеку Jquery. Только вначале не забываем сделать копию файла functions.php обязательно! Добавляем в административной панели в functions.php после тега <?php  вот этот код:


 

Ну вот и всё! Таким образом мы установили кнопку наверх без плагина! Согласитесь ничего сложного в этом нет.

P.S. Понравилась статья? Получайте новые статьи на свой e-mail, чтобы не пропустить полезную информацию!

С уважением, Анна Федорова!


Комментариев: 1

  1. Владимир

    Спасибо Анна, как раз хотел сделать кнопку вверх. :)

    Ответить

Оставить комментарий: