Как сделать анимированную, красивую кнопку НаВерх (Вверх) — для сайта. Javascript, html и css коды

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

Доброго времени суток, уважаемый посетитель/подписчик моего сайта AdvertSeo-Helper.ru!

В этой статье я хочу рассказать/показать как сделать кнопку НаВерх/Вверх/To Top для сайта без использования всяких ненужных плагинов.

Будем брать в пример сайт на движке WordPress но инструкцию можно попробовать применить на любых платформах.

Я постараюсь объяснить, на сколько это возможно, проще что бы Вы остались без вопросов, постараюсь более детально написать какие коды/скрипты (html, css, JavaScript) и куда их нужно вставлять для того что бы у Вас все заработало.

Сперва хочу рассказать, зачем на сайте вообще нужно ставить кнопку НаВерх/Вверх/To Top:

  • Во первых это для удобства — Вашего и Ваших посетителей.

Согласитесь что не очень удобно прокручивать страницу вверх, если Вы прочитали статью до конца и хотите вернутся наверх, особенно если статья выдалась длинной, а Вам еще были интересны и комментарии… Тут на помощь и приходит кнопка НаВерх/Вверх/To Top, которая позволяет за долю секунды уже быть вверху сайта и продолжать навигацию по меню.

  • Во вторых для дизайна – красиво оформленные и качественно подобранные под дизайн сайта, кнопки НаВерх/Вверх/To Top – всегда будут иметь свое место на экране.

Пожалуйста уделите дизайну кнопки НаВерх/Вверх/To Top нужное время. Посмотрите на то как реализовали эту кнопку такие высоко посещаемые сайты как Одноклассники и VK – убого – могли бы постараться (не буду останавливаться на этом).

Тоже в дизайн сайта входит и размеры и местоположение кнопки НаВерх/Вверх/To Top.

По размеру  — делайте кнопку не сильно  маленькой и не слишком большой – так, подходяще…

По местоположению – ВНИЗУ-СПРАВА и точка. Потому что большинство людей привыкли искать эту кнопку именно там. Не придумывайте ничего лишнего, так как кнопку НаВерх/Вверх/To Top Вы будете делать, устанавливать и настраивать один раз (желательно) и потом Вы должны о ней забыть, так как написание хороших статей, для сайта, более важное занятие…

  • В третьих, как всегда все будем делать без плагинов, учитывая то что Вам определенно нужно сделать кнопку НаВерх/Вверх/To Top для сайта по вышеперечисленным причинам.

Спешу порадовать, что ниже будут представлены 2 метода установки кнопки НаВерх/Вверх/To Top на сайте – один метод ну очень простой, другой чуток труднее – в плане его реализации, но последовав простым шагам, ВСЕ получится, даже не сомневайтесь.

Давайте сперва разберемся с изображением для кнопки НаВерх/Вверх/To Top.

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

По этому, дорогой читатель, я приду на помощь со своим вариантом, простой на первый взгляд, изображением для кнопки НаВерх/Вверх/To Top.

изображение кнопки наверх вверх Что бы скопировать картинку на свой компьютер, нажмите правой кнопкой мыши и выберите «Сохранить картинку как…» или «Save Image As…».

Далее, Вам нужно скопировать ее на сервер в папку с Вашей активной темой (для WordPress):

Пример:  http://мой-сайт.ru/wp-content/themes/название_темы/images/название_картинки.png

Надеюсь Вы знаете как попасть в известную папку public_html, но если у Вас что то не получитсяобращайтесь в комментариях...

Метод №1Как сделать анимированную кнопку НаВерх/Вверх/To Top для сайта. Html и css коды.

Заходим в административную панель сайта (админку) -> Внешний вид -> Виджеты.

Перетаскиваем в правый сайдбар (или в любой другой сайдбар) виджет «ТЕКСТ». Открываем и вводим следующий html код:

<a class="naverx" href="#" title="Наверх"></a>

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

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

В нашем случае анимацией будет замена цвета кнопки при наведении курсора мышки и исчезновение тени из под кнопки. Сами все увидите после всех этих манипуляций.

Итак, задаем стиль кнопки – для этого заходим в админ панель сайта -> Внешний вид -> Редактор (файл style.css) и в самом конце вставляем следующий код:

a.naverx {
position:fixed;
bottom: 70px;
margin-left: 1020px;
right:5px;
background: #417297 url (http://advertseo-helper.ru/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
width: 32px;
height: 32px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
cursor: pointer;
padding: 15px;
margin: 20px;
opacity: 0.8;
box-shadow: inset 0 1px 0 rgba (255,255,255,0.5), 0 2px 2px rgba (0,0,0,0.3), 0 0 4px 1px rgba (0,0,0,0.2);
-webkit-transition: all 0.2s 0.01s ease;
}

a.naverx:hover {
background: #F0824F url (http://advertseo-helper.ru/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
box-shadow: none !important;
opacity: 1;
}

ПОЖАЛУЙСТА — замените ссылку изображения кнопки (параметр background: ) на ссылку изображения которое Вы загрузили на свой хостинг.
Когда я удалю изображение — и Ваша кнопка тоже пропадет.На время настройки кнопки, можете пользоваться ссылкой, но не забудьте заменить ее !!!

Обязательно сохраняем все настройки, обновляем страничку сайта и если все правильно сделано на Вашем сайте должна появится кнопка НаВерх/Вверх/To Top.

Для того что бы подобрать цвет кнопки под дизайн сайта, находясь на страничке сайта, наведите курсор мышки на кнопку, нажмите правый клик и в меню выберите последний пункт: «Inspect Element». Ваш браузер откроет, в нижней части, коды html, java и соответствующие им – элементы стиля.

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

В правой части, найдите стиль «a.naverx» и в параметре background нажмите на квадрат с цветом кнопки.

В появившиеся цветовой гамме выберите нужный цвет кликая курсором внутри квадрата. Как найдете нужный цвет, скопируйте его номер, который начинается с # и замените его на номер «старого» цвета кнопки.

Напоминаю что замена делается в файле style.css и не забудьте сохранить. Кстати, когда Вы будете выбирать цвет, то увидите сразу изменения на экране, так что подбор цвета не самая трудная задача.

Если Вам не все понятно с тем как подобрать цвет, как его заменить и т.д., прошу ознакомится с моим курсом «Красивые Эффекты для Изображений Сайта», где-то в конце курса я рассказываю и показываю о том как можно заменить цвет элемента сайта.

Метод №2Как сделать анимированную кнопку НаВерх/Вверх/To Top для сайта. Html, css коды и скрипты.

Второй метод предполагает подключение JavaScript, для того что бы при нажатии на кнопку, прокрутка вверх произошла медленней, плавней. Я бы сказал, что это будет выглядеть чуть красивее чем в первом варианте — выбирать Вам. Единственный недостаток это скрипт, который замедляет работу сайта, но не подумайте что это сильно заметно, я сам пользуюсь этим методом.

Итак, картинка у Вас есть (см. выше), далее Вам нужно зайти в файл bottom.php (Внешний Вид -> Редактор), найти там закрывающиеся тег </body> и прямо перед ним вставить следующий код самого скрипта кнопки НаВерх/Вверх/To Top:

<!-- Begin toparrow script -->
<a class="naverx" title="Наверх" style="display: block;"></a>
<script type="text/javascript">
$(function (){$.fn.scrollToTop=function (){$(this).hide ().removeAttr («href»);if ($(window).scrollTop ()!="0"){$(this).fadeIn («slow»)}var scrollDiv=$(this);$(window).scroll (function (){if ($(window).scrollTop ()=="0"){$(scrollDiv).fadeOut («slow»)}else{$(scrollDiv).fadeIn («slow»)}});$(this).click (function (){$(«html, body»).animate ({scrollTop:0},"slow")})}});
</script>
<script type="text/javascript">// <![CDATA[
$(function() {
$(".naverx").scrollToTop();
});
// ]]></script>
<!-- End toparrow script -->

Сохраняемся, далее заходим в файл style.css, копируем код стиля, который находится выше (a.naverx, a.naverx:hover), вставляем код и сохраняем изменения.

Заходим на страницу своего ресурса,  обновляем страницу и радуемся результату.

Внимание! JavaScript код можно вставлять и в файле header.php а в моей теме WP он установлен в файле theloop.php.

Если код/кнопка вверх не будет работать в одном файле, попробуйте установить код скрипта в другом (из выше перечисленных)– обязательно получится.

В стиле a.naverx, находится параметр margin-left: 1020px; — меняйте его значение (1020px) для того что бы расположить кнопку НаВерх/Вверх/To Top левее или правее.

Пример кнопки Вы можете наблюдать на моем блоге, что-то похожее должно получится и у Вас!

На этом все друзья, не забиывайте заходить в гость и делиться статьей с друзьями. Рад любым вопросам и комментариям!

Удачи!

5 комментария к Как сделать анимированную, красивую кнопку НаВерх (Вверх) — для сайта. Javascript, html и css коды

  • Дмитрий  написал:

    Сделал все как написано, но кнопка вверх почему-то прозрачная и ее не видно..., т.е. мышкой ее можно найти при нажатии страница уходит наверх но кнопки не видно, может что подскажите?

    • Max Vuzin  написал:

      Хотелось бы узнать какой вариант Вы использовали?

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

  • Дмитрий  написал:

    Пробовал оба способа, не появилась кнопка(((

    Ссылку в стиле заменил на свою, картинку закинул в папку с темой в паку images.

    Вот какая ссылка получилась:comp-doma.ru/wp-content/t...mages/nawerx.png

    В чём может быть причина?

  • Владимир  написал:

    Как ты сделал разные стили для цитат?

    • Max Vuzin  написал:

      Сделал изменения в css коде...

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

Автор блога оставляет за собой право на удаление или редактирование Вашего сообщения и данных которые Вы оставляете в поле выше. Оставляя свой комментарий - Вы принимаете данные условия. Если Ваш комментарий не по теме или составляет только такие выражения как : "Классная статья", "Обязательно попробую", и т.д. - будьте готовы на то что ссылка на Ваш сайт будет удалена. Что бы ссылка осталась - напишите комментарий из несколько предложений и обязательно по теме статьи. Спасибо за понимание!!!