ТОП-3 лучших способа кнопки вверх для сайта

Здравствуйте, уважаемые посетители!

Я продолжаю публиковать статьи технической тематики.

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

Нужна ли

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

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

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

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

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

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

к содержанию ↑

Кнопка вверх, как Вконтакте

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

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

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

Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.

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

Для загрузки скрипта можно разместить сам код между тегами <head></head> или перед закрывающим тегом </body> в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

В данном коде можно изменить некоторые параметры под себя.

  • Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
  • В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
  • В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами <head></head> в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом </body> в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

Еще более эффективным вариантом является загрузка этого скрипта из отдельного файла. Файл можете скачать по кнопке ниже. Находится он внутри архива.

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

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

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

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

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

к содержанию ↑

Второй способ кнопки наверх от Вконтакте

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

  1. Размещение скрипта на сайте;
  2. Размещение кода, отвечающего за вывод кнопки;
  3. Оформление с помощью CSS стилей.

Далее в статье я не буду объяснять, как и куда вставить тот или иной скрипт. Делайте все по аналогии с предыдущим пунктом.

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

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

Файл скрипта скачайте по кнопке ниже.

Размещаете файл на хостинге и делаете загрузку файл через код в самом низу сайта, как делали это ранее. Файл называется точно также, как и в 1м способе, поэтому можно взять ту же самую строку кода для вывода.

Далее нужно вывести саму кнопку. за это отвечает следующий код.

Разместить его можно в самом низу сайта, перед закрывающим тегом </body> в файле footer.php.

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

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

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

Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.

к содержанию ↑

Третий способ кнопки наверх без плагина

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом </body>/

  • В строке 8 задаем отступ после которого будет доступна кнопка для прокрутки.
  • В строке 17 задаем значение скорости прокрутки (чем меньше, тем быстрее).

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

  • В 4й строке прописан отступ кнопки от правой границы экрана. Данный параметр вполне нормально смотрится на любом разрешении монитора. Поэтому, можно его не менять;
  • В 7й строке прописан путь к картинке, которая будет отображаться. Поэтому, вам необходимо найти изображение небольшого размера и загрузить его в папку images, которая лежит рядом с фалом стилей. Название в данном коде картинка имеет top.png. Можете назначить любое другое;
  • Ширина и высота изображения стоит по 60 пикселей. В 8 и 9 строках ширину и высоту соответственно можно изменить.

Третий способ мы также рассмотрели. Это, пожалуй, наиболее распространенный вариант на обычных сайтах. Вы его можете увидеть практически на любом блоге не движке WordPress.

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

Если в первых двух способах функция прокрутки вверх была реализована в левой области, то в данном случае кнопка наверх для сайта должна быть с правой стороны и размещаться, как можно ниже к экрану монитора. Связано это с уже устоявшимся расположением. Ничего мудрить не нужно, делаем, как все.

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

Все. Останавливаюсь. Пока!

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

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 66
  • воспользовался инструкцией по вашему видеоролику, но работает частично, "на верх " меня возвращает а вот назад где был не вернуться, даже надпись не меняется на "назад"

    • Осмелюсь предположить, что вы просто что-то неправильно сделали. Может скрипт неверно разместили. А может и вовсе разместили не тот скрипт, который подразумевает прокрутку страницы "Назад". Также существует вариант, что на сайте имеются какие-то скрипты, блокирующие работу скрипта кнопки наверх. Это могут быть различные плагины, создающие конфликты. Скорее всего, что это именно конфликт с каким-либо сторонним скриптом, если сделали все правильно.

      • Здравствуйте, Константин! Спасибо вам большое, даже у меня-чайника получилось)) Почти...Ставила второй вариант, с кнопкой "Назад", а работает тоже только кнопка вверх))
        Скажите, а это нормально, что в вашем коде у "вверх" стоит скобка вверх, а на "вниз" стоит этот символ: Ў? Спасибо большое!

        • Здравствуйте. Нет, это ненормально, видимо при редактировании статьи недосмотрел. Там должна быть стрелка вниз. Сейчас отредактировал, но пришлось заменить сам тип стрелок, т.к. нет времени искать точно такую стрелку.

  • Больное спасибо! Все отлично работает! правда, я там еще кое что подредактировал... под себя, для красоты. Но ваш совет - единственный, что я нашел в рунете, который бы работал, не глючил, а главное был прост в исполнении=)

  • Константин, нужна помощь. Заморочился с первым вариантом, через загрузку js-файла в тему. Не работает... Кнопка не появляется на моём блоге... Что делать? Прописал код в файл footer.php. Поменял в ссылке домен и тему на свои. Всё, как ты сказал...

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

  • Попробовал все варианты. К сожалению ни один из них не начал работать... эххххх. Пойду в инет, поищу чего-нибудь...

    • Очень странно. Можно попробовать установить один из плагинов для кнопки вверх. Имеются довольно неплохие решения.

  • Может быть вы знаете, почему эта кнопка находится именно слева?

    • Видимо разработчики Вконтакте приняли такое решение на основании своего опыта и анализа поведения аудитории)

  • Спасибо, очень подробно объяснили, всё получилось.

  • Хоть я и новичок, но с помощью вас всё получилось. Материалы скачала и всё получилось.

  • Спасибо за подробную статью, нужен ваш совет, как разместить третий вариант кнопок на конструкторе в котором предусмотрено только 2 поля BODY и HEAD для вставки кода своего скрипта, сам файл скрипта и стили я загрузить в него не могу только код. Есть возможность как-то обойтись кодом и использовать такие удобные кнопки?

    • В чем проблема? Скрипты можно размещать, как в области Head, так и в области Footer. В последнем случае, просто скрипт будет подгружаться в последнюю очередь, что сказывается на скорости загрузки основных элементов сайта. В остальном же размещение скриптов в области шапки сайта вполне приемлимо и некоторые скрипты только так и работают.

  • Вообщем такая проблема, использую вариант второй. Но есть очень заметная проблема: после загрузки страницы (прокрутки еще не было), на область с лева можно нажать - появится эта кнопка, можно нажать еще раз, она исчезнет, или если в мамент загрузки страницы - мышка будет в левой стороне, будет видна эта кнопка. У вас на сайте также. Можно как-то исправить?

    • Может и можно, но я не программист и, как это сделать, не подскажу, к сожалению)

  • Странная логика расположить кнопку слева, да еще сверху. Наверное программист контакта левша был. :)
    Я правша. Когда читаю статью мышь, чтобы не мешалась, отодвигаю в право. И тут кнопка справа снизу в самом удобном месте. Для левши слева наверное удобнее конечно, но то, что сверху.....

    • Кнопка расположена не сверху. Она на всю высоту сайта. Справа-слева, это уже другой вопрос. Вы отслеживали, кликают ли на кнопку справа? На других сайтах и стоит кнопка справа и по ней вообще не кликают. А вот на блоге на кнопку слева иногда, но кликают. К тому же этой очень распространенный вариант, т.к. точно такой же, как и в соц. сети ВК.

  • Спасибо!Очень хорошая кнопочка! Поставил себе на сайт, на определенных страницах работает корректно,а на других нет (то есть в самом верху кнопка отображается всегда) Почему так?

    • Скорей всего на тех страницах, где кнопка не работает, грузятся еще какие-то скрипты, конфликтующие со скриптом кнопки. Поэтому, кнопка всегда видна и нет плавной прокрути.

  • а как можно конфликт убрать?

    • Заменить скрипты их аналогами или переписать скрипты. Это вопрос к программистам.

  • Респект! Второй вариант не проверяла, Первый работает отлично.

  • Спасибо, поставил на один сайт, прекрасно смотрится.

  • Спасибо, Константин! Поставил в футер. Работает.

  • Константин не знаете такой плагин каторый может изменит места Рубрики?

    • Не понял суть проблемы. Что значит "изменит места Рубрики"?

    • Если вы про порядок вывода рубрик на сайте wordpress, то есть плагин Custom Taxonomy Order NE

  • Константин , воспользовался третьим способом, сделал так как у тебя написано, перезагружаю страницу. и вижу, что нет стредки ввверх, потомсправа подвожу мышкой, и мышка преобретает руку. нажимаю, и поднимаеться на вверх страницы, оно то поднимаеться, но стрелка невидима. её невидно, наощусь ищешь так сказать. как сделать чтобы была видна стрелка в папке. в коневой папке сайта среди папок есть папка img, в ту папку я ранее загрузил стрелку. вообщем функция которую ты написал. оно то работает, но стрелка невидима, как решить проблему?

    • В стилях прописан путь к папке images, а не к img. Поэтому кнопка может и не отображаться. Пропишите в стилях путь к своей папке.

  • Константин, в третьем способе, всё пытаюсь, неполучаеться, всё ж сделал правильно, картинку расположил в в корень блога public_html в папку images внутри картинка Top.png. всёровно кнопка невидна. путь же верный указан. почему тогда невидна..

    • Если все правильно сделано, то все должно быть видно. Более ничего не могу сказать, не видя сам сайт. Это как пальцем в небо тыкать.

  • Вот вот смотри почитай, http://aimblog.ru/ustanovka/plaginy-wordpress/kak-sdelat-knopku-naverx-na-wordpress-bloge.html там после плагина идёт как сделать без плагина немного опустись. У меня получаеться тот способ, но я нехочу тем способом, посколько надо задействовать ещё файл functions.php. больше там возни, и больше нагрузка на сайт, твой же способ создаёт менее нагрузку на сайт, меньше прописки и меньше надо задействовать файлов. быстрей сайт грущиться у меня, с твоим 3 способом. но стрелки нет. Хотелось бы на твоём способе остановиться. пока неудаёться кнопку сделать видимой, но путь моей кнопки указан как там на том сайте. прочти

    • Ну так разместите картинку так, как описано это у меня в статье. Если вы ничего не меняли в стилях третьего способа, то картинка должна быть расположена внутри папки images, которая в свою очередь находится в папке с файлами шаблона. Если папка называется по-другому, то просто в строке 7 стилей измените ее название. Зачем что-то изобретать, сделайте так, как описано и все будет работать.

  • Все получилось, супер! Спасибо за решение.
    Будьте любезны, скажите:
    Есть ли способ показывать данный ползунок на всех устройствах кроме мобильных?
    Потому что на мобильном не очень верно отображается. Бывает что становится очень большим и слишком мешает...ИЛи может задать настройки по размеру экрана пользователя?

    • Непонятно о каком способе вы говорите. Есть ли у вас адаптивная верстка на сайте или нет? Если есть, то необходимо в соответствующий медиазапрос прописать стиль display:none к классу или ИД той кнопки, которая установлена. Если нет, тогда необходимо добавить медиазапрос, например для ширины экрана меньше 1000 пикселей, кнопка показываться уже не будет:

      @media (max-width:1000px){
      .leftbar-wrap{display:none}
      }

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

      • Доброго времени суток, Константин! Я установил данную кнопку (первый способ) на сайте. Хочу убрать с мобильных версий. Что мне нужно добавить в код? Я понял, что нужно добавить медиазапрос, но как и в какое место?

        PS: я новичок в этом деле
        PSS: на сайте нет адаптивной верстки

        • Здравствуйте. В любое место файла стилей style.css разместите следующий код:

          @media (max-width:1000px){
          ..button-up{display:none}
          }

          В скобках указан параметр ширины экрана (1000px), на котором уже не будет показываться полоска. Поставьте это значение, исходя из ваших нужд.

          • Не работает =(. В чем может быть причина?

          • Попробуйте так:

            @media (max-width:1000px){
            .button-up{display:none !important}
            }

            Также в первом варианте в начале стоит 2 точки, одну из них нужно убрать, она лишняя. Во втором варианте уже ничего убирать не нужно.

          • Все так же, не работает

          • Я сейчас зашел на ваш сайт и полосы прокрутки вообще не увидел.

          • На главной странице слева имеется же. Проверил с разных браузеров и устройств.

          • Я немного ошибся. Вот так попробуйте:

            @media screen and (max-width: 1000px){
            .button-up{display:none !important}
            }

        • И все равно не работает =((. Видимо не судьба поставить кнопку.

          • Почему же не работает. Проверил, все работает. С разрешений экранов шириной в 1000 пикселей кнопка исчезает.

          • Имеется, если нажать на левую сторону, то включается. Только что проверил с телефона и в режиме "Инструменты разработчика" в браузере.

          • вот проверил только что еще раз, нет кнопки. Уменьшил окно браузера до 1000 пикселей и она пропала, хоть нажимай, хоть не нажимай.

  • Чуть подправлю первый вариант и будет отлично =) Спасибо за скрипт

  • Геморно и долго, не каждый въедет как это сделать, есть метод который работает везде и очень быстро, называется он вот так, можно не благодарить



  • Благодарю, иду испытывать 3-й способ установки, лишний плагин отключу....

  • Отличный скрипт, на моем сайте все работает и даже в мобильной версии она не мешает, единственный вопрос, как прозрачность настроить?

    • За прозрачность отвечает свойство opacity. Значение 1 - прозрачности нет.

  • А как перенести кнопку на правую сторону сайте?

    • Если вы говорите про второй вариант кнопки, как в ВК, то в 7й строке кода стилей необходимо изменить left: 0; на right: 0;

  • Константин, это снова я. Та же беда - нужно отключить кнопку "наверх" для мобильных устройств, верстка адаптивная. Можете что-нибудь посоветовать?

    • Посмотрите, пожалуйста, комментарии выше, я неоднократно отвечал на данный вопрос.

      • вы отвечали на вопрос, если верстка неадаптивная, а у меня адаптивная. Я все комментарии читала) Вот был ваш ответ "Если есть (адаптивная верстка), то необходимо в соответствующий медиазапрос прописать стиль display:none к классу или ИД той кнопки, которая установлена." А где этот медиазапрос находится, это очень интересный вопрос!
        Ну да ладно, уже договорилась, чтобы мне сделали.

        • Я давал на примере коды в комментариях. Невнимательно смотрели.

        • Кстати, у вас кнопка неправильно работает. Что-то не так сделали. Она должна появляться только при прокрутке страницы, а прокручивание вниз должно быть плавным.

          • Попробовала, получилось! Спасибо большое, Константин!

  • Как во втором способе изменить картинку?

  • Не получается. Вставлял в сайт и специально созданный файл html. Нужны какие-то библиотеки или кнопка только для WordPress?

    • только для вордпресс конечно же

  • Во втором примере у html кода отсутствует закрывающий тег

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

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