Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, чтобы помочь заблудившимся посетителям попасть на предыдущую страницу. А также, как скрыть эту кнопку, если в браузере посетителя отсутствует история переходов по сайту.
Способы создания кнопки «назад» на JavaScript
Чтобы при нажатии кнопки заставить браузер переместиться на одну страницу назад, воспользуемся JavaScript методом history.back() . Объект history отвечает за историю переходов, которые пользователь совершил в переделах одной вкладки браузера. Эти переходы браузер сохраняет в сессию текущего окна. Если предыдущая страница отсутствует, данный вызов метода не делает ничего.
Способ 1
Самый простой способ сделать кнопку «назад» — прописать событие onclick wp-block-syntaxhighlighter-code «>
Способ 2
Несмотря на удобство 1 способа всё же правильнее будет настроить события из кода JavaScript методом addEventListener.
Скопируйте этот скрипт и вставьте его на нужную страницу.
Уроки jQuery практика- как сделать кнопку наверх (back to top) как вконтакте
document.getElementById(‘history-button’).addEventListener(‘click’, () => < history.back(); >);
В том месте, где требуется установить кнопку, добавьте HTML код:
Как скрыть кнопку «Вернуться назад» при прямом посещении
Если посетитель сделает прямой переход к странице содержащей кнопку «назад» и воспользуется этой кнопкой, то ничего не произойдёт, так как переходить будет некуда, либо его вернёт обратно на пустую вкладку. Поэтому логичнее будет эту кнопку скрыть.
Для этого будем использовать свойство history.length которое возвращает количество переходов (шагов) вперёд или назад, выполняемых в пределах текущей вкладки или окна.
Рассмотрим несколько возможностей history.length и поведение пользователя:
- Пользователь посещает страницу с новой вкладки браузера, тогда history.length = 2 . Если он кликнет по кнопке «назад», то перейдет на пустую вкладку.
- Пользователь открывает страницу на новой вкладке или окне, кликая по ссылке, тогда history.length = 1 . В этом случае возвращаться будет некуда, т.к. это новая сессия.
- Пользователь переходит на страницу после посещения нескольких страниц, в этом случае history.length > 2 и теперь мы можем ему показать кнопку «назад». В скрипте применим этот вариант.
Добавим кнопке класс, чтобы скрыть её при прямом заходе с помощью CSS, а когда посетитель выполнит переход с предыдущей страницы — удалим указанный класс методом classList.remove .
Скопируйте скрипт и вставьте на странице, где будет установлена кнопка. Если используете WordPress, то скрипт можно разместить в блоке «Произвольный HTML» редактора Гутенберг.
window.addEventListener(«load», function() < let elem = document.querySelector(‘#history-button’); if (window.history.length >2) < elem.addEventListener(‘click’, () =>< history.back(); >) elem.classList.remove(«history-hide»); > >);
HTML код кнопки будет таким:
Кнопка «назад» за 5 секунд
.history-hide < display: none!important; >#history-button
Ещё свойства объекта history, которые можно использовать для создания кнопок вперёд/назад:
- history.go(n) — свойство, позволяющее перемещаться по истории. В качестве аргумента передается смещение, относительно текущей позиции. Например, history.go(-2) вернёт вас на две страницы назад. Данный метод сработает только если страница, на которую нужно вернуться, существует в журнале;
- history.forward() — идентично вызову history.go(-1) , т.е. загружает следующую страницу, если она есть в истории. Можно использовать вместе с history.back() .
Кнопка возврата назад на PHP
Кнопка вверх, вниз, назад, как вконтакте
Здравствуйте, уважаемое Сообщество!
Захотел поставить на сайт кнопку вверх, как вконтакте. Там она работает хитро, если опускаешься вниз, то она показывает «Наверх», а когда поднялся наверх, то показывает «Вниз», и при нажатии ты пойдешь туда вниз, откуда поднялся наверх. И еще одна фишка ее — это назад. Так вот, я поставил такой скрипт: habrahabr.kz/admin_1369_knopka-vverh-kak-vkontakte.html, но не работает все как надо, только вверх, почему-то… Может кто-то знает как решить эту проблему страшную?
Речь идет о сайте tanat.info/, кнопка стоит там, но работает только вверх. Раньше мне и этого хватало, но если есть больше функций, то почему бы и нет.
Thanatognozija
- Испытатели
- Сообщений: 225
#2 23 декабря 2012 в 03:44
Thanatognozija, Я у вас не нашла эту кнопку вообщеНадо смотреть какие скрипты у вас уже подключены и искать разнообразные казусы и конфликты.
Честно, мне иногда было легче прописать скрипт прямо в файл шаблона, если он коротенький.
Люблю эту CMS! Я немного художествую тут: http://virelart.ru 🙂 Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
Azura
- Москва
- Испытатели
- На орбите
- Сообщений: 1541
#3 23 декабря 2012 в 03:49
Ой, спасибо большое, уважаемая Azura, я только заметил, что она не отображается незарегистрированным пользователям, почему-то. Вот, еще одна проблема огромная… Откуда этот скрипт узнал, что есть незарегистрированный пользователь?
Thanatognozija
- Испытатели
- Сообщений: 225
Сегодня в 22:12
Реклама
#4 23 декабря 2012 в 03:54
Thanatognozija, значит у вас скрипт добавился в условие распознания админа и пользователя… Попробуйте строку подключения этого скрипта поставить в списке самой последней. Проверьте чтоб не ниже , можно даже прям перед этим закрывающимся тэгом.
Люблю эту CMS! Я немного художествую тут: http://virelart.ru 🙂 Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
Azura
- Москва
- Испытатели
- На орбите
- Сообщений: 1541
#5 23 декабря 2012 в 03:58
О, точно, все заработало теперь. Чудеса да и только Спасибо большое, Azura, я сегодня смогу лечь спать теперь хоть… ох… Оказывается влияет еще если не там вставишь по порядку… вот это уже реальные новости для меня.
Thanatognozija
- Испытатели
- Сообщений: 225
#6 23 декабря 2012 в 04:01
Thanatognozija, Спокойной ночи и удачиКонфликты возникают обычно как раз из-за того, что скрипты подключенные выводятся криво и конфликтуют. А ещё иногда люди ошибаются и прописывают не внутри . Вот это надо проверять сразу.
Люблю эту CMS! Я немного художествую тут: http://virelart.ru 🙂 Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
Azura
- Москва
- Испытатели
- На орбите
- Сообщений: 1541
#7 23 декабря 2012 в 04:05
Azura, буду теперь делать так всегда и учитывать эти моменты, спасибо БОЛЬШУЩЕЕ. И все так, вот порылся, погуглил, нет решения этой проблемы, вверх есть, а вниз нету… Там видимо еще какой-то скрипт хитрый прописан. Я не разбираюсь в этом, но ведь можно с сайта забрать css файл, почему же скрипт извлечь нельзя с того же вконтакте?
Thanatognozija
- Испытатели
- Сообщений: 225
#8 23 декабря 2012 в 07:29
Почему нельзя? А почему нельзя украсть какой то модуль или хук не напрягаясь? это тоже, самое.Может у них там вообще не один скрипт этих стрелочек) Легче самому написать.
ЁжигГ
- Тамбов
- Испытатели
- Сообщений: 203
#9 23 декабря 2012 в 09:14
скрипт можно вставить и в теле не обязательно в head
reload
- Испытатели
- На орбите
- Сообщений: 2928
#10 23 декабря 2012 в 11:27
А кнопка назад не работает?
Virus9alex
- Нижний Новгород
- Испытатели
- Сообщений: 31
#11 23 декабря 2012 в 11:38
Да, действительно, кнопка «назад» не работает, в этом ведь и вся проблема, чтобы работала кнопка вниз и назад. Я думал, что может кто-то сталкивался с таким, или знает как реализовать сие.
Thanatognozija
- Испытатели
- Сообщений: 225
#12 23 декабря 2012 в 14:08
Вот есть реализация этого, только в другом чуть виде, но главное, что такое есть, кнопка вниз тоже там работает: learn.javascript.ru/play/tutorial/browser/dom/updown/index.html
А вот код, который стоит у меня сейчас:
Ох, для меня это как на китайском, я пытаюсь что-то понять, но не понимаю ничего… Почему оно не работает, где там ошибка… Странно, почему же все ставят кнопку вверх, а вниз не ставят, две в одной, и еще назад… Это ведь удобно… Хотя, может это только мне удобно, не знаю…
Thanatognozija
- Испытатели
- Сообщений: 225
#13 23 декабря 2012 в 16:32
reload, не знаю, но у меня адовые глюки начинались когда я внизу вставляла))) Только раз мне это помогло — но это блин как минимум не красиво.
Thanatognozija, а вы попробуйте использовать ту реализацию по ссылке.
Я вижу у вас в коде есть функции jQwery. Я бы на вашем месте использовала только простую джаву, потому что система наша работает с библиотеками jQwery, а это может вызвать конфликты со сторонними скриптами и для этого может понадобиться вообще помощь программистов…
Люблю эту CMS! Я немного художествую тут: http://virelart.ru 🙂 Пока по большей части выкладываюсь тут vk.com/virelart. p.s.: пасибки можно в карму :3
Azura
- Москва
- Испытатели
- На орбите
- Сообщений: 1541
#14 23 декабря 2012 в 16:35
Azura, Дело в том, что там, по ссылке, кнопка нарисована по-другому. Я бы использовал ее, если бы кнопка там была такая, как сейчас на сайте, А там птичка просто… :(( Да, если бы эту фукцию, которая по ссылке подключить к тому визуальному сопровождению, которое вконтакте, то и получилось бы то, что я хочу, пусть даже без кнопки назад. Но такого решения я не нашел нигде.
Thanatognozija
- Испытатели
- Сообщений: 225
#15 23 декабря 2012 в 16:39
Thanatognozija, а что вам мешает просто заменить файлы картинок и дописать текст «вверх» и «вниз»?)))
Единственное что наверное не удастся поставить — это окошко полупрозрачное, которое активизируется. Можно только чтоб оно резко меняло цвет.
О, а ещё можно перерисовать кнопку назад и сделать её кнопкой вверх, а так же переписать ей скрипт.)))
Источник: instantcms.ru
Кнопка вверх и назад как на старом ВКонтакте
Все элементарно просто. Одним подключением скрипта удаленно и можно работать с плагином.
1-ый способ
Вставляем перед этот код
и наслаждаемся работой скрипта.
2-ой способ
1) Скачиваем скрипт (.js + .gif) и забрарасываем на хостинг в корень папку /vk-up-back/.
2) Подключаем скрипт, прописываем перед в вашем шаблоне.
p.s. чтобы не создавать некрасивых папок, можно разложить по полочкам. Файл vk-up-back.js ложим в папку /js/ или /javascripts, а картинку vk-up-back кидаем к /img/ или /images/, но тогда появятся новые правки.
В файле vk-up-back.js нужно прописать пути к картинкев CSS стилях,
background:url(/vk-up-back/vk-up-back.gif)
а также там можно и поднастроить стили.
Учитывайте, что скрипт может конфликтовать с другими.
Скрипт назад/вверх, как в старом контакте
| Размер: | 1.36 KB |
| Скачано (раз): | 1101 |
| Версия: |
| vk-up-back.zip | Скачать |
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
