плавный скролинг при нажатии на кнопку (шизофрения)

sowelanes · 20 мар 2015

Доброе время суток.
Для начала опишу задачу, и трудность с которой я столкнулся.
Есть форма авторизации.

Код (PHP):

<form class="form" action="" id="auth" method="post">

поля формы...

<input class="button" type="submit" value="Войти">

</form>

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

Для начала просто добавил:

<form class="form" action="#auth" id="auth" method="post">
Нажмите, чтобы раскрыть...

Некрасивое дергание к форме при выполнении...

Пробовал вот как-то так, но в таком варианте у меня игнорируется php обработчик, который сразу за формой:

Код (PHP):

<form class="form scroll" action="#form" id="auth" method="post">

поля формы...

<input class="button" type="submit" value="Войти">

</form>

<div id="form">

...

обработчик пхп

...

<script>

 $('.scroll').click(function(event) {

 event.preventDefault();

 var href=$(this).attr('href');

 var target=$(href);

 var top=target.offset().top;

 $('html,body').animate({

 scrollTop: top

 }, 400);

 });

</script>

Может быть есть варианты более адекватнее?

MouseZver · 20 мар 2015

подключил ява библию в head ?

sowelanes · 20 мар 2015

Конечно, у меня сейчас форма при нажатии кнопки плавно скролится к нужному месту (сначала тестил на простых ссылках с якорями), но ничего не происходит, из чего я сделал вывод, что php обработчик обходится стороной.

denis01 · 20 мар 2015

у меня всё работает

Код (PHP):

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

<form method="POST" action="?#test">

 <input type="submit">

</form>

 

 

<a name="test">

<h1>title</h1>

 

 

 

 

</body>

</html>

sowelanes · 20 мар 2015

У меня мой вариант работает - плавный скролл к нужному месту при нажатии кнопки есть, я к тому, что не выполняется пхп обработчик самой формы (правильность заполнения полей, авторизация), кнопка тупо красиво скролит страницу и ничего более. Обработчик расположен на той же странице сразу после формы
Структура такая (пример в первом сообщении):

форма
якорь перед формой (куда плавно опускает сраницу)
пхп обработчик формы (отображающий правильность заполнения полей, авторизация)
javascript

Нажмите, чтобы раскрыть...

denis01 · 20 мар 2015

ну так посмотри phpinfo() что там у тебя происходит после отправки формы

sowelanes · 21 мар 2015

У меня даже до отправки формы дело не доходит. Мало того (вчера не заметил) в таком варианте еще и радио кнопки не работают..
Вот мой тест:
http://avzp.com.ua/1/test.php

Код (PHP):

<html>

 <head>

 <title>123</title>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 </head>

 <body>

 

 

 

<div id="form"></div> //якорь

<form class="form scroll" action="#form" id="auth" method="post">

<input name="login" id="login" class="textbox" placeholder="login:" type="text" maxlength="30"/> 

<input name="pass" id="pass" class="textbox" placeholder="pass" type="password" maxlength="30"/> 



<label for="sch"><input type="radio" checked="checked" name="chs" value="sch" id="sch"/>opt1</label> 

<label for="th"><input type="radio" name="chs" value="th" id="th"/>opt2</label> 



<input class="button" type="submit" value="enter"></a> [url="registration"]reg[/url]

</form>

 

<?

if(isset($_POST['login']) && isset($_POST['pass']))

{

 echo "проверки, авторизации и т.д.";

}

?>

 

 

 

 

<script>

 $('.scroll').click(function(event) {

 event.preventDefault();

 var href=$(this).attr('action');

 var target=$(href);

 var top=target.offset().top;

 $('html,body').animate({

 scrollTop: top

 }, 1000);

 });

</script>

 </body>

</html>

denis01 · 21 мар 2015

class="form scroll" и $('.scroll').click
ты перехватил клик по форме и тем самым заблокировал её

sowelanes · 21 мар 2015

Это можно вылечить или может можно другим способом сделать?

denis01 · 21 мар 2015

можно отправлять форму через ajax, или после submit в php вывести $('.scroll').
$('.scroll').click удалить

sowelanes · 21 мар 2015

denis01 сказал(а):

или после submit в php вывести $('.scroll').
$('.scroll').click удалить
Нажмите, чтобы раскрыть...

А можно ли чуть подробнее? Вывод в обработчике который за формой?

denis01 · 21 мар 2015

Вывел форму на страницу без js, форму отправили на php обработчик, ты через if проверил, что пришёл POST и вывел скрипт который при загрузки страницы сделает тебе animate.

http://phpfaq.ru/na_tanke

плавный скролинг при нажатии на кнопку (шизофрения)

sowelanes Активный пользователь

MouseZver Суперстар

sowelanes Активный пользователь

denis01 Суперстар
Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар
Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар
Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар
Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар
Команда форума Модератор

Быстрый поиск

плавный скролинг при нажатии на кнопку (шизофрения)

sowelanes Активный пользователь

MouseZver Суперстар

sowelanes Активный пользователь

denis01 Суперстар Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар Команда форума Модератор

sowelanes Активный пользователь

denis01 Суперстар Команда форума Модератор

denis01 Суперстар
Команда форума Модератор

denis01 Суперстар
Команда форума Модератор

denis01 Суперстар
Команда форума Модератор

denis01 Суперстар
Команда форума Модератор

denis01 Суперстар
Команда форума Модератор