Меню Рубрики

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

На многих сайтах, сбоку в самом низу есть кнопка Наверх для сайта, в виде стрелки, нажав на которую, вы перебрасываетесь на самый верх страницы. Я тоже решил поставить такую кнопку, без использования плагинов, скриптов.

Всю работу можно разделить на 4 этапа:

1. Поиск картинки

Для начала потребуется найти картинку, которую хотите использовать в качестве кнопки «Наверх». Для этого можете набрать в Yandex картинках поисковый запрос: «Кнопка наверх для сайта». В моем случае, я выбрал такую картинку:

Кнопка наверх для сайта

Далее, необходимо ее закинуть на ваш сайт. Переходите в админ панель WordPress, нажмите Медиафайлы и загрузите картинку. Скопируйте ссылку на картинку.

Кнопка наверх для сайта2. Код в Footer.php

Как создается Html кнопка наверх? Для этого необходимо  зайти в файловый менеджер вашего сайта и открыть файл Footer.php. Перед закрывающим тегом </body> нужно вставить вот такой код:

<a href="#skrol"><img src="Ваша ссылка на картинку" alt="4" width="45" height="43" class="skroll"/></a>

Вместо ссылки, вставляете ссылку вашей картинки. Сохраняете файл.

3. Код в Header.php

Теперь нужно открыть файл header.php, перед тегом </head>, я вставил, вот такой код:

<div id="skrol"></div>

4. Позиционирование кнопки

Теперь можете проверить свой сайт, кнопка должна появиться, но она находится не совсем там, где нужно. Для этого ее нужно спозиционировать. Откройте файл Style.css и в  самом низу добавьте такие строчки:

.skroll {width: 200px;
top: 750px;
right: -20px;
position: fixed;}

Width — устанавливает ширину блочных элементов

Top  — устанавливает толщину границы сверху

Right: — задает расположение блока

Position: fixed — позволяет зафиксировать элемент и создать плавающую кнопку Наверх.

Подставляя свои значения, вы добьетесь нужных результатов.

Плавный скролл к якорю  JQUERY.

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

В корне вашего сайта создайте файл, с расширение js. И поместите в него, вот такой код

$(document).ready(function() {
   $('a[href^="#"]').click(function () { 
     elementClick = $(this).attr("href");
     destination = $(elementClick).offset().top;
     if($.browser.safari){
       $('body').animate( { scrollTop: destination }, 1100 );
     }else{
       $('html').animate( { scrollTop: destination }, 1100 );
     }
     return false;
   });
 });

Теперь откройте файл Header.php и после строчки

<div id="skrol"></div>

Добавьте строчку

<script type="text/javascript" src="/js/file.js"></script>

/js/file.js — здесь укажите свой полный путь к файлу file.js, который мы создали выше.

Теперь при нажатии на кнопку «Наверх», вы плавно переместитесь вверх сайта.

Если возникнут вопросы, вы можете написать в комментариях.

 

 

[Всего голосов: 1    Средний: 5/5]

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

6 комментариев на «“Как сделать кнопку наверх на сайте”»

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

  2. Азат, здравствуйте! Хочу поблагодарить за бескорыстную помощь! К счастью, есть на просторах интернета люди, готовые прийти на помощь!
    С уважением, Ольга Карасёва

    • Здравствуйте Ольга! Спасибо за ваш отзыв. Если возникнут вопросы, можете написать здесь либо на почту!

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

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

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru