Кнопка «Вверх» для сайта 24. Кнопка вверх для сайта


Кнопка "Вверх" с плавной автопрокруткой

Учитывая популярность мобильных устройств и адаптивной верстки, сайты стали растягиваться в длину на несколько экранов, соответственно, когда текст длинный, то прокрутить страницу вверх уже тяжело. Для удобства пользователей добавляют кнопку «Вверх». Однако простая реализация кнопки с помощью якоря, прокручивает страницу рывком. Использование JS или jQuery помогает решить эту проблему сделав кнопку плавной прокрутки.

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

Просмотрев кучу скриптов, выбрал наиболее оптимальный и дописал необходимый функционал. Итак, написанный скрипт формирует кнопку вверх, когда пользователь прокручивает страницу вниз более чем на один экран. Появление кнопки – плавное. Сама кнопка – это гиперссылка, в которую вы можете добавить любой элемент: и блоки, и изображения.

Добавлять в HTML код ничего не нужно. Кнопка добавляется автоматически. Итак, как добавить кнопку Вверх на сайт? Вначале подключите в head библиотеку jQuery.

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="/js/go_top.js"></script> </head>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  <script src="/js/go_top.js"></script>

</head>

Затем подключите ниже библиотеку с кодом кнопки.

Для оформления кнопки добавьте в CSS два класса, которые описывают обычное состояние ссылки и ее hover состояние.

#go-top { position: fixed; bottom: 25px; right: 10px; cursor:pointer; display:none; width: 50px; height: 20px; background: #c0c0c0; } #go-top:hover { background: #333; }

#go-top {

  position: fixed;

  bottom: 25px;

  right: 10px;

  cursor:pointer;

  display:none;

  width: 50px;

  height: 20px;

  background: #c0c0c0;

}

 

#go-top:hover {

  background: #333;

}

Как обычно, посмотреть решение можно на CodePen

See the Pen ZWWrdP by Alex (@Asmodey) on CodePen.

или скачать готовое с GitHub.

w3.org.ua

Кнопка «Вверх» для сайта на jQuery как у Яндекса

наверх

Привет! Сегодня расскажу о том, как легко прикрутить к любому блогу или форуму кнопку "ВВЕРХ" как у меня на сайте. Удобства и интерактивности никогда не бывает много, тем более, когда это не занимает много времени. Этот простой и легкий скрипт на jQuery я подсмотрел на Yandex и сделал себе аналогичный.

Вообще, в настоящее время, разработка сайтов всё больше напоминает конструктор. В сети полно готовых скриптов и модулей, которые остается только грамотно скомпоновать на своем сайте. Но, для этого, всё-таки, необходимо иметь начальные знания и представления о CSS, PHP и JavaScript.

Понадобится всего пара минут времени для создания красивой и работающей кнопочки "Наверх"! (единственное условие - у вас должна быть подключена библиотека jQuery).

  1. В шаблон сайта, перед закрывающим тегом </head> добавляем:
  2. <script type="text/javascript">$(document).ready(function(){  $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});  $('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});});</script>
  3. Перед закрывающим тегом </body&gt в шаблон сайта добавляем следующий html-код:
  4. <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
  5. Осталось добавить CSS-стили для оформления кнопки «Наверх» в файл стилей вашего сайта (например styles.css)
  6. .b-top {  z-index:2600;position:fixed;left:0;  bottom:70px;width:35%;margin-left:50%;  opacity:0.5;filter:alpha(opacity=50);}.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}.b-top-but {  z-index:2600;position:absolute; display:block;  left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;  color:white;border-radius:7px;  background:#888 url(img/b-top.png) no-repeat 50% 11px;}
  7. файл с изображением стрелки (b-top.png скачать)

Что тут можно настроить или изменить под себя (для тех, кто вообще не шарит в CSS):

  • первым делом измените путь к файлу с изображением стрелки на тот, куда вы его сохранили на сайте
  • background:#888 - цвет фона кнопки
  • width:35%; - положение кнопки относительно правого края страницы
  • bottom:70px; – смещение кнопки относительно нижнего края страницы

Если считаете статью полезной,не ленитесь ставить лайки и делиться с друзьями.

mdex-nn.ru

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

Здравствуйте, уважаемые читатели. Сегодня я расскажу Вам о том, как я реализовал кнопку «Вверх» на своём блоге. Прежде всего, я решил сделать кнопку «Вверх», по тому, что эта кнопка в один клик позволяет подняться в начало статьи. Да и честно говоря, параметры юзабилити (удобство пользования) учитываются поисковыми системами. То есть при наличии кнопку «Вверх» отпадает необходимость мучать колесо прокрутки на мышке. И вот это удобство для пользователя положительно учитывается поисковыми системами.

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

Установки кнопки «Вверх» с помощью плагина для WordPress

Я попробовал два: Scroll to Top и Dynamic To Top. Оба достойные плагины, легко устанавливаются и настраиваются. Есть возможность указать путь к своей картинке. В Dynamic To Top есть ещё возможность настроить, будет ли кнопка «Вверх» отображаться на мобильных устройствах.

Но, как и любой другой плагин эти так же создают дополнительную нагрузку на сервер. Я считаю, что ради одной кнопки дополнительная нагрузка на сервер, — не оправдана.

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

И я решил не использовать плагин и продолжить поиск идеального решения.

Установки кнопки «Вверх» на основе jQuery

jQuery — библиотека JavaScript, обеспечивающая взаимодействие JavaScript и HTML.

Данный способ подойдёт для реализации кнопки «Вверх» с плавной прокруткой на многих сайтах, в том числе и сделанных на WordPress.

Этот способ хорош, но он на один шаг длиннее следующего способа. О котором мы как раз и поговорим подробно.

Установки кнопки «Вверх» на чистом JavaScript

Итак, именно этот способ я выбрал для своего блога созданного на WordPress. Для этого способа вам потребуется всего лишь два файла (картинка и скрипт). И сделать вставку кода в файл footer.php и добавить несколько стилей в style.css.

Этот способ хорош тем, что не надо подключать ни каких дополнительных библиотек или устанавливать плагины. А результат получается отличный, без лишней нагрузки на ваш сайт.

Приступаем.

Шаг 1. Создание изображения кнопки «Вверх»

Итак, для начала вам потребуется изображение для кнопки «Вверх». Таких изображений в Интернете огромное множество. Скачав такое изображение, его нужно будет ещё доработать. А точнее сделать спрайт. Спрайты позволяю на основе CSS сделать объединение фоновых картинок, которое выглядит как эффект анимации.

Для работы с графикой, я использую Photoshop. Но так как не у всех есть фотошоп, мы воспользуемся онлайн сервисом PIXLR EDITION, который идеально подходит для выполнения подобного рода задач.

После того, как вы скачали нужное изображение, переходим в онлайн редактор Pixlr Edition и выбираем «Загрузить изображение с компьютера».

Загрузка изображения

И открываем ваше изображение кнопки «Вверх». В моём случае, — это ракета.

Предварительное изображение

Если ваше изображение большего размера, чем вам нужно, как у меня. Такое изображение нужно уменьшить до нужных размеров. Воспользуемся способом трансформации, так как нужно изображение повернуть. Выбираем пункт меню «Редактирование» — «Free transform».

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

Трансформация изображения

Для пропорционального изменения ширины и высоты изображения предлагаю использовать диагональные маркеры с удержанием клавиши Shift для исключения искажения.

Маркеры трансформации

Должно получится вот так.

posletransf

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

Копируем слой

Следующим действием нужно выстроить изображения строго вертикально друг над другом. Для этого выбираем инструмент «Перемещение» и клавишами управления курсором поднимаем одно изображение над другим.

Вертикальное выравнивание

Теперь нужно верхнее изображение обесцветить, для получения эффекта, когда цвет проявляется после наведения на объект указателя мышки. Выбираем пункт меню «Коррекция» — «Цветовой тон/Насыщенность». Ползунок «Насыщенность» сдвигаем в крайнее левое положение (-100).

Обесцвечивание

Теперь нужно отсечь всё лишнее. Для этого выбираем инструмент «Обрезка» и выделяем область вокруг нашего изображения. Ничего лишнего, только два изображения. После выделения области, нажимаем клавишу «Enter».

Обрезка изображения

Всё готово для сохранения изображения, но для начала запомните размер изображения. Он пригодятся в дальнейшем.

Размер изображения

Вот теперь всё готово и нужно сохранить изображение. Для этого переходим в пункт меню «Файл» — «Сохранить». Выбираем сохранить на «Мой компьютер», вводим имя (только латинские буквы) и выбираем тип файла PNG (этот формат поддерживает прозрачность). Жмём кнопку «ДА».

Сохранение изображения

Шаг 2. Создание файла скрипта кнопки «Вверх»

Разумеется, мы не будем изобретать колесо. А воспользуемся готовым решением, которое я нашёл вот здесь. Из всего что я пересмотрел, этот вариант понравился больше всего. Хотя, конечно для новичков, написано сложновато для понимания. На самом деле всё просто. Нужно создать новый файл и вставить в него специальный код. А это файл далее использовать в работе.

Для создания файла, да и вообще работы с кодом, рекомендую использовать бесплатный редактор кода NotePad++.

Открываем редактор, создаём новый файл и вставляем предложенный код. Скачать весь код можно здесь.

Фрагмент кода

Теперь сохраняем файл в формате js.

Файл скрипта

Готово, изображение и файл со скриптом для кнопки «Вверх» с плавной прокруткой у нас есть. Остаётся внести небольшой фрагмент кода в файл подвала (footer.php) вашей темы WordPress. И в таблицу стилей (style.css) добавить необходимые стили для кнопки «Вверх». А также скопировать наши файлы на сайт.

Шаг 3. Копирование файлов на сайт WordPress

Лучше всего для выполнения таких задач подойдёт FTP-соединение через TotalCommander или FileZilla. О том, как настроить такое соединение читайте здесь.

Файл с изображением кнопки «Вверх» нужно скопировать в папку images Вашей темы.

Пример: http://Ваш сайт/wp-content/themes/Ваша тема/images/up.png

Файл скрипта нужно скопировать в папку js Вашей темы.

Пример: http:// Ваш сайт /wp-content/themes/ Ваша тема /js/totop.js

Если таких папок у вас нет, вы можете их создать или скопировать файлы в другие папки. Только непременно запомните к ним путь. Это важно.

Шаг 4. Доработка файла footer.php

Совет: перед любыми экспериментами с кодом, делайте резервные копии. Если не всего сайта, то хотя бы файлов с которыми собираетесь работать.

Итак, в административной панели WordPress выбираем раздел «Внешний вид» — «Редактор» — открываем файл «Подвал (footer.php)».

И перед закрытием тега </body> вставляем такой код:

<!-- Кнопка Вверх --> <script type="text/javascript" src="http://Ваш сайт/wp-content/themes/Ваша тема/js/totop.js"></script>

Важно! Помните, что вам необходимо вставить вашу ссылку к файлу скрипта.

Вставка кода

И теперь остаётся последний штрих, — настроить стиль для кнопки.

Шаг 5. Создание стиля для кнопки «Вверх»

Для этого в файл стиля Вашей темы (style.css), добавляем вот такие стили:

Стиль кнопки

Помните, наше изображение было 39х191 пиксель. Отсюда и стиль: ширина (width) 39px; высота (height) половина от основной высоты 96px; смещение фона при наведении мышки scrollTop:hover{ background-position:0 -108px; }.

Разумеется, у вас будет своё изображение и размеры будут отличатся. Поэтому надо будет поэкспериментировать с этими значениями.

На этом создание кнопки «Вверх» с плавной прокруткой на основе JavaScript закончено. Можно перезагружать страницу Вашего блога в браузере и любоваться работой этой кнопки.

Для облегчения задачи, я приготовил для Вас файл архив в котором собрал все необходимые исходные файлы. Файл расположен на Яндекс-Диске, скачать можно здесь.

Желаю вам удачного применения кнопки «Вверх» на ваших сайтах и блогах. Если будут вопросы пишите в комментариях, постараюсь помочь.

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru