Показать сообщение отдельно
  #1 (permalink)  
Старый 21.03.2015, 18:03
Интересующийся
Отправить личное сообщение для sones Посмотреть профиль Найти все сообщения от sones
 
Регистрация: 21.03.2015
Сообщений: 10

плавный скролинг при нажатии кнопки на форме
Приветствую, есть форма, которая находится чуть ниже центра страницы, пхп обработчик на этой же странице, необходимо, что бы при нажатии кнопки "войти" происходил плавный скролл к якорю перед формой. Ниже - код и демо как сделал, но при таком варианте игнорируется пхп обработчик, и радио кнопки не работают. При нажатии на любой элемент формы - тупо скролит вниз и ничего не происходит
http://avzp.com.ua/1/test.php
<html>
    <head>
        <title>123</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        </head>
    <body>    
<br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<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"/><br><br>
<input name="pass" id="pass" class="textbox" placeholder="pass" type="password" maxlength="30"/><br>
<p>
<label for="sch"><input type="radio" checked="checked" name="chs" value="sch" id="sch"/>opt1</label><br/>
<label for="th"><input type="radio"  name="chs" value="th" id="th"/>opt2</label><br/>
</p>
<input class="button" type="submit" value="enter"></a>&nbsp;&nbsp;&nbsp; <a href="registration">reg</a>
</form>
<br />

<?
if(isset($_POST['login']) && isset($_POST['pass']))
{
   echo "проверки, авторизации и т.д.";    
}
?>

<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<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>
Ответить с цитированием