Покажите пример кнопки «Вверх», которая появляется при прокрутке страницы вниз, а нажатие на неё должно возвращать пользователя наверх страницы. Желательно, средствами CSS.
Отслеживать
задан 31 мар 2014 в 10:20
Dezza Simpson Dezza Simpson
270 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков
Если нужно будет без использования jquery, вот здесь ссылка я написал код для такой кнопки на чистом javascript.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Кнопка наверх для сайта
Сегодня реализуем «Кнопку наверх» для вашего сайта с помощью jQuery и нативного JavaScript. Когда посетитель будет скроллить страницу вниз, в определенном месте будет появляться кнопка, при клике на которую, произойдёт плавный скролл наверх страницы.
В HTML файле создайте div , который будет представлять из себя кнопку для возврата наверх.
Наверх
Данная кнопка оформлена может быть как угодно, не просто надпись «Наверх», например, вы можете кнопку сделать в виде картинки.
В CSS файле спозиционируем кнопку (например, справа снизу) и скроем её. В дальнейшем с помощью javascript сделаем чтобы она появлялась.
.to-up
Так же добавили z-index — определяет порядок слоёв по оси Z и cursor: pointer — чтобы появлялась рука при наведении (т.к. у нас вместо ссылки div). Другие стили по желанию и воображению.
jQuery: на расстоянии 780px показываем блок с помощью функции fadeIn , а на расстоянии меньше 997px скрываем при помощи fadeOut . Так же задаём скорость перехода Наверх в миллисекундах (например, 566).
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
JavaScript: Работа с Массивами
Наличие Динамически Добавленного Элемента
Стилизация Input File
Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
Стилизация Скролла
События Формы
Вставляем кнопку «наверх» на сайт
Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на jquery и чистом javascript. Найдём причины, по которым она может не работать.
подключить jQuery;
загрузить на сайт изображение кнопки;
добавить код, скрипт и стили.
Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.
Выбираем подходящее изображение и загружаем его в каталог сайта. Предоставлю на выбор несколько вариантов. Скачать можно кликнув правой клавишей мышки по рисунку и нажав «Сохранить картинку как».
width: 100px; height: 40px;
width: 74px; height: 94px;
width: 60px; height: 60px;
width: 67px; height: 80px;
width: 63px; height: 61px;
Вставляем html , скрипт и стиль .
Код кнопки следует вставить в шаблон сайта. Например, перед закрывающимся тегом
Скорость прокрутки можно регулировать, меняя в последней строке число «300».
В стилях незабываем указать свой путь к изображению, его ширину и высоту.
Кнопка на чистом JS
Плавающую кнопку «наверх» можно сделать и на чистом JavaScript. Всё аналогично предыдущему примеру, в том числе и стили. Меняется только html и скрипт. Библиотека jQuery не нужна.
Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.
Что делать, если кнопка не работает
Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;». Появилась?
Нет . Значит проблема в неправильном пути к изображению или html тег размещён в неподходящем месте шаблона. Попробуйте разместить его перед закрывающимся тегом «body».
Да . Значит дело в js скриптах. Следует проверить корректность подключения библиотеки jQuery (если применялся первый вариант). Всё в порядке? Тогда оберните скрипт в следующую конструкцию:
Конструкция выполняет скрипт после загрузки всей страницы.
Не помогло? Пиши в комментариях и постараемся найти проблему вместе.
18 окт 2014 г.
Ещё интересное — 6
Комментарии —
ПОКАЗАТЬ СТАРЫЕ
Razor 10 апреля 2015, 18:11 # ↓
На Java работает, но вот картинка не отображается, по всякому пробовал.
Razor 10 апреля 2015, 19:48 # ↓
В wordpress втулил это дело в подвал и на dispaly:block; поменял в стилях. «Изображение» в ссылки пишет, а саму картинку не отображает. Такие дела.
Andy Si 11 апреля 2015, 10:59 # ↑ ↓
Значит путь к изображению неправильно прописал. Скрипт был опробован уже сайтах на 10 как минимум, везде работал.
Вячеслав 30 июня 2017, 14:18 # ↑ ↓
Спасибо https://gosstandart.info/ все руки не доходили. вот поставил. мило смотрится, даже дизайн менять не стал пока. для мобильной версии сайта с длиннными текстами, вещь незаменимая! «Я СПОКОЙНО МОГУ НАЖАТЬ КНОПКУ HOME ИЛИ КЛИКНУТЬ ПО ПОЛОСЕ ПРОКРУТКИ. » ну ну… Так что ставим аккуратные прозрачные кнопочки, тестируем на полезность и не слушаем никого!
Комментарий был удален.
А-лат 12 августа 2015, 17:16 # ↓
Живи вечно, чувак!
0bush 11 февраля 2016, 13:56 # ↓
Супер. Спасибо.
Игорь 21 апреля 2016, 09:11 # ↓
Здравствуйте. Кнопка отображается не на всех страницах сайта. Подскажите пожалуйста, что может быть? Очень нужно…
Andy Si 21 апреля 2016, 09:24 # ↑ ↓
Код не на всех страницах размещён. jQuery не на всех страницах подключена. Ошибки в других скриптах мешают выполнению нижележащего javascript кода. Вот основные причины.
Наталья 09 февраля 2018, 18:23 # ↑ ↓
Здравствуйте у меня тоже кнопка отображается только на 1 стр. http://ao-constar.com.ua/produkciya.php на др. нет
Andy Si 11 февраля 2018, 18:56 # ↑ ↓
Наталья, у вас на странице http://ao-constar.com.ua/produkciya.php подлючена библиотека jquery, а на других — нет. Из-за этого не работает, добавляйте на все страницы:
Наталья 12 февраля 2018, 12:03 # ↑ ↓
Спасибочки большое за подсказку, все работает.
Комментарий был удален.
Максим 18 мая 2016, 12:09 # ↓
А как сделать кнопку «На главную» в таком же стили при помощи javascript?
Andy Si 18 мая 2016, 15:38 # ↑ ↓
В каком стиле? Вместо div поставить a и поставить соответствующую ссылку на главную страницу.
Комментарий был удален.
steve3009 12 июня 2016, 20:17 (был изменён) # ↓
Привет. Спасибо за кнопку. Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется. Подскажите, пожалуйста, что не так.
steve3009 12 июня 2016, 20:25 (был изменён) # ↑ ↓
Разобрался. Хотел на hover менять opacity, но не работает с текущим механизмом.
kinoprorok
kinoprorok 07 сентября 2016, 23:58 (был изменён) # ↓
Андрей, спасибо ) Еще раз помог
Andy Si 09 сентября 2016, 17:40 # ↑ ↓
не за что, заходи если что)
Сергей 27 мая 2018, 22:01 # ↑ ↓
Здравствуйте! Очень понравилось модальное окно с котом. Не поделитесь скриптом?!
Andy Si 27 мая 2018, 22:10 # ↑ ↓
Привет. Мне как-бы не жалко, но скинуть не могу по причине того что как-такового единого скрипта нет. Это набор jquery плагинов (glio,cookie,leanModal) и CSS стилей и как всё это подключить я просто описать не могу за 5 минут.
Комментарий был удален.
Andy Si 25 сентября 2016, 20:32 # ↑ ↓
Вот, человек дело говорит. Проверяйте чтобы кнопка не наезжала на контент. Проверяйте на мобильниках. А то видите как бомбит у некоторых))
123 28 сентября 2016, 18:51 # ↓
Скжите, а как сделать, чтобы кнопка появлялась слева, а не справа
Andy Si 28 сентября 2016, 21:33 # ↑ ↓
В стиле заменить right: 30px на left: 30px
Алиса 04 ноября 2016, 12:19 # ↓
Добрый день! У меня тоже проблема в том, что картинка не отображается, я написала текст в этом div чтобы проверить работает ли вообще и действительно функционал работает, но картинки нет. (Если я вывожу картинку непосредственно в этом div «между скобок» тоже работает) но как указано у вас выше, почему то не срабатывает. Очень интересно почему так происходит? если меняю на dispaly:block; то при первой загрузке я вижу текст, проблема как в этом комментарии «Но у меня есть одна проблема — кнопка показывается сразу при загрузке страницы. При начале скроллинга исчезает, а потом снова появляется. Подскажите, пожалуйста, что не так.» Было бы очень здорово если бы вы ответили, просто интересно почему так происходит.
Andy Si 04 ноября 2016, 13:04 # ↑ ↓
Привет. Мне тоже интересно почему не срабатывает у вас. Пришли адрес страницы где не работает кнопка наверх — я сегодня отвечу в чём причина. Можешь прислать на эл. почту (внизу сайта указана) если не хочется адрес сайта писать в комментариях.
Только одновременно это нельзя использовать вместе с кнопкой наверх. Чтоб и то и то было, надо переписывать всё. В комментарии не выложу.
Inna 30 ноября 2016, 20:48 # ↓
Класс, спасибо большое
Vladimir 22 декабря 2016, 15:39 # ↓
Подскажите люди добрые, как сделать эту кнопку чтобы она не до шапки доезжала а до меню?
Andy Si 22 декабря 2016, 16:10 # ↑ ↓
В строчке когда меняй ноль на высоту, где расположено меню… 200 например:
Vladimir 22 декабря 2016, 16:39 # ↓
Сенкью вери матч
Vladimir 22 декабря 2016, 20:18 # ↓
А еще не подскажешь как мне https://gyazo.com/2d894009416b78558bd72bd9f666ac5d сделать отступ?(там где красным, так чтоб я страницу полностью видел) вообще не получается
Andy Si 23 декабря 2016, 09:50 # ↑ ↓
По скриншоту не могу определить в чём проблема.
Vladimir 23 декабря 2016, 10:26 # ↑ ↓
Я разобрался с этим, Помогите мне как убрать отступ от меню до шапки чтобы меню было вплотную с шапкой https://gyazo.com/3fb74143fa5f898baa998db627c4fbe9
Andy Si 24 декабря 2016, 10:36 # ↑ ↓
Я по скриншотам CSS стили смотреть не могу. Смотри позиционирование элементов, margin, padding у элементов.
Vladimir 24 декабря 2016, 15:52 # ↑ ↓
Я все пробовал, там где должно быть нечего не происходит
Павел 02 февраля 2017, 09:37 # ↓
Круто, спасибо! Люблю, когда объясняется все так легко и просто. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай 🙂
Павел 02 февраля 2017, 09:38 # ↓
Круто, спасибо! Люблю, когда все так легко и просто объясняется. А то на некоторых сайтах такие инструкции, что хоть в петлю полезай 🙂
Алексей 14 марта 2017, 11:28 # ↓
От всей души благодарю. ! У Вас на сайте кнопка вверх немного обрезана справа, т.к. в стилях css указаны height: 60px; width: 60px;
Andy Si 15 марта 2017, 19:53 # ↑ ↓
Да, верно заметили. Спасибо.
Никита 16 марта 2017, 10:33 # ↓
Спасибо большое! Всё получилось, только вот в Яндекс браузере почему то совсем не хочет отображаться. Не подскажете в чём дело может быть?
Дмитрий KFS
Дмитрий KFS 16 марта 2017, 22:58 # ↓
Огромное спасибо! Работает!
Андрей 10 апреля 2017, 21:48 # ↓
Андрей 10 апреля 2017, 21:48 # ↓
Александр 27 сентября 2017, 08:22 # ↓
Самое классное — так это то, что с других сайтов код не работал, хоть тресни, а здесь сразу все встало на свои места и заработало. Спасибо автору!
ivan plysyuk
ivan plysyuk 07 ноября 2017, 17:31 # ↓
Привет! можешь скрип таймера написать Пример — таймер должен быть 40 секунд, запускатся должен как пользователь зашол на страницу автоматом. А по истечению 40 секунд загорается примеру число 1232?
Andy Si 07 ноября 2017, 20:58 (был изменён) # ↑ ↓
Я писал про таймер в другой статье и там есть готовый код.
CybShot 18 ноября 2017, 23:56 # ↓
Здравствуйте. Я столкнулся с такой проблемой: при загрузке страницы кнопка уже есть (ее быть не должно), а при дальнейшем скролле она пропадает (ее и не должно было быть), но через какое-то количество пикселей появляется вновь (когда и должна). Как отключить ее первичную прогрузку? Или это нормальная работа данного скрипта?
Andy Si 19 ноября 2017, 11:52 # ↑ ↓
Добрй день. Нет, изначально кнопка не должна отображаться. За это отвечает CSS стиль:
#upbutton { display: none; }
Либо уже существующие стили его переопределяют, либо этот стиль по каким-то причинам не применяется к кнопке.
CybShot 19 ноября 2017, 13:16 # ↑ ↓
Большое спасибо
Алексей 17 декабря 2017, 03:16 (был изменён) # ↓
Подскажите, пожалуйста, в чем может быть проблема?
Есть тестовая страница: http://nasledniki.narod.ru/skal/Pik-Porozhisty2.htm
Вначале добавил кнопку «Вверх» как в Вашем примере. Отрабатывала нормально. Потом добавил скрипт Fancybox для удобного просмотра фотографий. И тут начались проблемы: 1) если кнопка «Вверх» не появилась, и начать просмотр фото, то после выхода из просмотра кнопка «Вверх» не появляется 2) если кнопка «Вверх» появилась, и начать просмотр фото, то после выхода из просмотра кнопка «Вверх» остается навсегда.
-->
Andy Si 17 декабря 2017, 12:21 # ↑ ↓
Я рекомендую обновить библиотеку jquery и fancybox. У вас на сайте и то и то устаревшее — могут быть в них баги. jquery последняя версия 3.2.1 — у вас 1.7.2, а fancybox 3.2.5 — у вас 1.2.1.
Скачайте с официальных сайтов: http://fancyapps.com/fancybox/3/ https://jquery.com/download/
Алексей 17 декабря 2017, 14:29 # ↑ ↓
Помогло обновление библиотек.
Вот страница после изменений, если кому интересно) http://nasledniki.narod.ru/skal/Pik-Porozhisty.htm
Andy Si 17 декабря 2017, 12:24 (был изменён) # ↑ ↓
Еще как вариант, можете попробовать заменить fancybox на Colorbox.
Андрей 12 февраля 2018, 23:09 # ↓
Здравствуйте! Я испробовал разные варианты установки кнопки. Но почему-то ни один не работает. В итоге остановился на первом вашем варианте. Подскажите, что я сделал не так. Страница размещения: https://avkzarabotok.info/aforex.html. Путь обращения к рисунку написан корректно. Заранее благодарен.
Andy Si 13 февраля 2018, 09:20 # ↑ ↓
Добрый день. Без доменного имени указывай путь к изображению в стилях. Просто: /images/arrow-up.png
Андрей 13 февраля 2018, 17:35 # ↑ ↓
Я убрал доменное имя, ничего не изменилось. Кнопка так и не появилась.
Andy Si 13 февраля 2018, 17:42 # ↑ ↓
всё изменилось, просто про сброс кеша браузера надо не забывать после правок стилей — ctrl + f5
Андрей 13 февраля 2018, 19:25 # ↑ ↓
Да, кнопка появилась. Но при нажатии на нее ничего не происходит.
Andy Si 13 февраля 2018, 22:48 (был изменён) # ↑ ↓
Ну да, оберни код в это, может поможет.
$(function(){ // сюда весь javascript код с сайта });
Кнопка наверх для быстрой прокрутки страницы в начало
Для реализации кнопки "Наверх" существует много вариантов. Я предложу два наиболее лёгких из них.
Кнопка с картинкой.
Кнопка с картинкой — самый простой вариант. Давайте посмотрим, как её сделать и реализовать на сайте.
Первым делом идём в Яндекс. Картинки и по запросу "Кнопка наверх" подбираем подходящую картинку.
Так как их там великое множество, то обращаем внимание не только на внешний вид, но и на размер картинки. 100 х 100 пикселей — это предел.
Следующий шаг — создаём из найденной картинки файл.
Делаем снимок экрана (скриншёт), аккуратненько вырезаем из него кнопку, сохраняем и получаем уникальный файл.
Затем будет не лишним доработать картинку, т.е. облегчить до возможных пределов и подогнать размер.
Если вы ещё на пользуетесь ни одним инструментом для этих целей, то рекомендую GIMP.
Как им пользоваться, подробно рассказано в статье Оптимизация изображений
И сразу примите как обязательное правило: На сайт нельзя грузить не оптимизированные изображения.
Даже самая небольшая картинка должна быть по возможности облегчена и подогнана по размерам. Так что простейший фотошоп вам жизненно необходим.
Итак, изображение готово, можно сказать кнопка готова, теперь внедрим её на сайт.
Пример на сайте работающем на WordPress.
Первым делом идём в Записи — Добавить новую и на пустую страницу загружаем готовую картинку. Делается это в режиме редактора Текст.
Затем копируем код картинки, сохраняем его в Блокнот или любой текстовый редактор, который у Вас есть и запись удаляем. Она была нужна только для получения кода.
После этого переходим в файл Подвал (footer.php) и в самом конце, перед вставляем полученный код картинки заключённый в якорную ссылку.
При этом из кода картинки удаляем имеющееся значение класса и прописываем туда своё.
Это нужно для дальнейшей работы со стилями (позиционирование)
Далее переходим в файл Заголовок (header.php) и сразу после вставляем якорь, представляющий из себя div с идентификатором
Теперь картинка привязана к верху страницы. Осталось её спозиционировать внизу страницы.
В коде изображения у нас задан класс, на основании которого создаём селектор и вносим в него свойства позиционирования
.scroll position: fixed; /* Позиционируем относительно окна экрана */ right: 50px; /* Отступ от правого края экран */ bottom: 20px; /* Отступ от низа экрана */ border-radius: 3px; /* Закругляем уголки картинки */ box-shadow: rgba(2,0,0,5.5) 0px 1px 3px; /*Добавляем тень снизу */
Добавляем этот код в файл стилей (style.css)
Ну вот и всё. Пример такой кнопки Вы видите в правом нижнем углу страницы.
Только не долго ей там осталось красоваться, так как в скором времени я переделаю её на кнопку без картинки.
Связано это с тем, что при очередной проверке скорости загрузки сайта оказалось, что эта картинка занимает 0.25 сек. и это происходит в самом начале загрузки страницы.
То-есть прямо влияет на скорость загрузки сайта.
Кнопка написанная на HTML + CSS.
Конечно копка без картинки будет смотреться менее эффектно, но для посетителя пришедшего за информацией, это не будет иметь большого значения.
Главное, она будет выполнять свою работу, и не будет влиять на скорость загрузки.
Первым делом нарисуем кнопку. Я покажу код, и то что получилось у меня, а Вы, если хоть немного знакомы с CSS сможете подкорректировать её под свой вкус.
Вместо текста в кнопке использован спецсимвол html ⇑ (двойная стрелка).
Если поиграть со свойствами gradient (переход цвета) и color (цвет шрифта), а так же добавить box-shadow и text-shadow (тени), то результат сможет украсить любой игровой сайт.
Весь код этой кнопки вставляется так же как у предыдущей, только не забудьте добавить в стили позиционирование.
