Как настроить поведение кнопки «Назад»?

JavaScript PHP

1 ответ

Как настроить поведение кнопки "назад"?
Проблема вот в чем:
По задумке (далеко не новой), поведение кнопки должно быть такое:
Когда страница загружена (на страницу только перешли и ни чего не делал пользователь), под header должна выводиться кнопка "назад", но при скроле вниз, эта кнопка должна пропадать (чтобы глаза не мозолила).
При этом, при малейшем скроле вверх (независимо как сильно просколена страница) кнопка должна появляться.

Что происходит сейчас:
При переходе на страницу, кнопка не выводится, но если проскролить вниз, а затем вверх до самого хедера, кнопка появляется.
в текущей реализации минусов несколько
1. нет кнопки при загрузке страницы
2. что бы кнопка появилась нужно делать скрол вниз вверх
3. что бы кнопка появилась, нужно скролить до самого верха.

Вопрос:
Как решить задачу, чтобы задумка заработала корректно?

Вот что я наваял:
Function.php

function previous_page_button() { 	if (!is_front_page()) { 			echo '&lt;a href="' . wp_get_referer() . '" class="previous-page-button"&gt;'; 			echo '&lt;i class="fa fa-arrow-left" aria-hidden="true"&gt;&lt;/i&gt;'; 			echo '&lt;/a&gt;'; 	} } add_action('wp_footer', 'previous_page_button');

function previous_page_button() { if (!is_front_page()) { echo '<a href="' . wp_get_referer() . '" class="previous-page-button">'; echo '<i class="fa fa-arrow-left" aria-hidden="true"></i>'; echo '</a>'; } } add_action('wp_footer', 'previous_page_button');

JS:

jQuery(document).ready(function($) { 	var previousScroll = 0; 	$(window).scroll(function() { 			var currentScroll = $(this).scrollTop(); 			if (currentScroll &gt; 100) { 					$('.previous-page-button').fadeOut(); 			} else if (currentScroll &lt; previousScroll - 5) { 					$('.previous-page-button').fadeIn(); 			} 			previousScroll = currentScroll; 	}); });

jQuery(document).ready(function($) { var previousScroll = 0; $(window).scroll(function() { var currentScroll = $(this).scrollTop(); if (currentScroll > 100) { $('.previous-page-button').fadeOut(); } else if (currentScroll < previousScroll - 5) { $('.previous-page-button').fadeIn(); } previousScroll = currentScroll; }); });

Кроме того, не могу понять как решить вторую проблему:
Если я с Главной перехожу на другую страницу, а потом нажимаю на кнопку "назад", по меня перекидывает обратно на главную.
НО если я с Главной перешел на другую страницу, а на этой странице перешел еще куда, то в этом случае, сколько бы я раз не нажимал на кнопку назад, меня не перекидывает на главную.
Другими словами:
с главной перехожу на страницу записей, затем перехожу на запись.
С записи клацаю на кнопку Назад, меня перекидывает на страницу всех записей, клацаю еще раз и попадаю на запись с которой только что ушел. И так до бесконечности.

Дополнительно:

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

Вы переходите на реферер. эта страница на которую вы пришли на текущую. Почему удивляетесь?
Хотите идти по истории назад, используйте window.history.back()

По поводу кнопки и скролла:

Вам не нужно отслеживать на сколько страница проскроллилась и что-то там считать.
Вам нужно только определить направление скролла. Если скролл вниз - спрятать кнопку, если вверх - показать.
В вашем случае посмотреть на разницу currentScroll и previousScroll. Если она положительная - вниз, если отрицательная - вверх

Ответы:

И так до бесконечности.

Это потому что используете ссылку на реферрер, т.е. предыдущую страницу. Навигацию "по цепочке назад" дает ссылка <a href="javascript:history.back()">

Благодарю за ответ.
Как быть в случае, если переход был с внешнго ресурса, ведь, если я не ошибаюсь, то именно referrer, вроде как, понимает, что переход был с внешнего ресурса и не смотря на это, перекидывает на главную сайта. Вроде имненно так работает, нет?
С переходом с внешнего ресурса есть нюанс: если ссылка с target=_blank или ручками открыли ссылку в новом окне/табе, то history.back не вернет браузер на внешний ресурс, в противном случае вернет. Вот тут для изменения поведения можно использовать реферрер: сравнивать его со своим доменом и в зависимости от задачи либо делать возврат на внешний ресурс там, где его нет, либо блокировать переход на внешний там, где он есть, но не нужен. Также можно подменять переход на внешний на переход на свою главную, если ссылка с внешнего была на внутреннюю страницу сайта (мне кажется это логичным)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Дмитрий К. Ответ

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

Пример HTML:

&lt;button class="back-button" type="button"&gt;Назад&lt;/button&gt;

<button class="back-button" type="button">Назад</button>

JS:

document.addEventListener('DOMContentLoaded', function () {
  const button = document.querySelector('.back-button');
  if (!button) return;
 
  let lastScrollY = window.scrollY;
 
  button.classList.add('is-visible');
 
  button.addEventListener('click', function () {
    if (window.history.length &gt; 1) {
      window.history.back();
    } else {
      window.location.href = '/';
    }
  });
 
  window.addEventListener('scroll', function () {
    const currentScrollY = window.scrollY;
 
    if (currentScrollY &lt; lastScrollY) {
      button.classList.add('is-visible');
    } else if (currentScrollY &gt; lastScrollY + 10) {
      button.classList.remove('is-visible');
    }
 
    lastScrollY = currentScrollY;
  }, { passive: true });
});

CSS:

.back-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
 
.back-button.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-button { opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .back-button.is-visible { opacity: 1; pointer-events: auto; }

Если кнопка должна выводиться не на главной, условие в PHP:

&lt;?php if (!is_front_page()) : ?&gt;
  &lt;button class="back-button" type="button"&gt;Назад&lt;/button&gt;
&lt;?php endif; ?&gt;

<?php if (!is_front_page()) : ?> <button class="back-button" type="button">Назад</button> <?php endif; ?>

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

Для мобильных добавьте достаточную область нажатия и фиксированное положение кнопки, если она должна быть доступна постоянно. Например, min-width: 44px и min-height: 44px. Также не забывайте про z-index: кнопка не должна попадать под sticky-header или баннеры. Если на странице есть якоря и плавная прокрутка, тестируйте кнопку после нескольких быстрых скроллов вверх/вниз, потому что именно там чаще всего проявляется неправильное определение направления.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 0 ответов

Как настроить поведение кнопки «Назад»?

Дополнительно:

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно