Перейти к содержимому

Как при нажатии на кнопку проскроллить страницу вниз

  • автор:

Курсы javascript

Приветствую, есть форма, которая находится чуть ниже центра страницы, пхп обработчик на этой же странице, необходимо, что бы при нажатии кнопки «войти» происходил плавный скролл к якорю перед формой. Ниже — код и демо как сделал, но при таком варианте игнорируется пхп обработчик, и радио кнопки не работают. При нажатии на любой элемент формы — тупо скролит вниз и ничего не происходит
http://avzp.com.ua/1/test.php

  123    



























    reg

?>











































21.03.2015, 18:26
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Последний раз редактировалось laimas, 21.03.2015 в 18:51 .
21.03.2015, 18:55
Интересующийся
Регистрация: 21.03.2015
Сообщений: 10

Я просто не стал выводить весь обработчик. При удачной авторизации идет редирект на другую страницу. Только я не совсем понял к чему это.

21.03.2015, 19:22
Регистрация: 14.01.2015
Сообщений: 12,990

Что к чему, редирект? Как один из способов защиты от F5. Если при этом у вас он производится передачей заголовка, то его не произойдет, потому как будет ошибка, причиной которой является вывод в браузер до обработчика формы.

21.03.2015, 20:36
Интересующийся
Регистрация: 21.03.2015
Сообщений: 10

Редирект происходит не передачей заголовка а обычным document.location.href, в самом конце пхп обработчика, после всех проверок на корректность данных. В данном примере который я описал выше — максимально упрощенный вариант, я не стал прописывать весь код обработчика так как Вы верно подметили:

У меня в первом посте есть ссылка на страницу, где есть форма, при нажатии на кнопку оно красиво скролится (чего я и пытаюсь добиться) но обработчик формы не выполняется.

21.03.2015, 20:52
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

if($_POST) //пришла форма, проверяем
//либо ошибки, либо ОК и переход
>

if(!$_POST() || $error) ?>

.
И форма с определением значений полей формы при ошибках.

Вот такова должна быть логика, а будет у вас там скролл на странице, не будет это не важно.

23.03.2015, 16:20
Интересующийся
Регистрация: 21.03.2015
Сообщений: 10

Не буду приводить весь код, переписал пол страницы, скролинг к нужному месту у меня в начале php обработчика:

  

Но тут получается, что если страница хоть немного прокручена вниз, то при клике сначала бросает наверх страницы, а потом плавно спускает к якорю.
Можно ли как-то offset’у задать, что бы он скролил от текущих координат?

23.03.2015, 18:08
Регистрация: 14.01.2015
Сообщений: 12,990

Странный обработчик, если JS находится в начале, где ему как раз не место. И вообще, по чем вы конце концов щелкаете — в описании речь о кнопке «войти», которой в коде не видно, а обработчик установлен щелчку на форме? Теперь речь о щелчке и действии похожем на так «модное» href=»#». В action=»#form», который то в общем на сервер не передается.

Так что же вы делаете то на самом деле?

23.03.2015, 19:04
Интересующийся
Регистрация: 21.03.2015
Сообщений: 10

// функция авторизации вначале которой слайдер scroll();"; . проверки и т.д. . > ?> . //якорь //форма  . //функция прокрутки  // обработчик по клику кнопки ?>

Если страница не прокручена — все нормально, я нажимаю на кнопку — меня плавно отпускает у нужному месту, но:

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

28 января 2013

Кнопки и плавная прокрутка вверх и вниз страницы.

Две мартышки сидят в обнимку

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

DEMO
Итак, HTML код кнопок выглядит так:

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

При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы — должна быть UTF-8;

Похожие публикации:
  1. Как переименовать ветку в git
  2. Как сделать скрин на ноутбуке huawei
  3. Как убрать нижнюю панель на андроид
  4. Какая функция возвращает значение истина или true

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

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