如何在单击按钮时将页面滚动到某个部分

时间:2015-09-01 14:20:00

标签: jquery laravel-4

如果提交表单后出现错误,我试图让我的页面滚动到我页面上的特定点。我的页面没有向下滚动。我使用Laravel 4。

Jquery的

$('.submit_btn').click(function(){
    $('html, body').animate({
        scrollTop: $('#form-messages').offset().top
    }, 2000);
});

我的contact.blade.php

<div class="col-lg-5 col-md-5 col-sm-5 col-md-offset-3">
      <div class="contact_form">
        <!-- <div id="form-messages"></div> -->
        @foreach($errors->all(':message') as $message)
          <div id="form-messages" class="alert alert-danger" role="alert">
            {{ $message }}
          </div>
        @endforeach()
        {{ Form:: open(array('url' => 'contact_request')) }}
          {{ Form:: text('name', '', array("class" => "form-control", 'placeholder' => 'Name')) }}
          {{ Form:: email('email', '', array("class" => "form-control", 'placeholder' => 'Email')) }}
          {{ Form:: text('subject', '', array("class" => "form-control", 'placeholder' => 'Subject')) }}
          {{ Form:: textarea ('message', '', array("class" => "form-control", 'placeholder' => 'Your Message')) }}
          {{ Form::submit('SEND', array('class' => 'submit_btn')) }}
        {{ Form:: close() }}
      </div>
    </div>

更新

所以我一半成功地达到了我所需要的程度,在击中id后它会跳起来。例如,当我单击提交按钮时,页面向下滚动到我的页面的正确部分,但随后它会跳到另一部分。

这是我更新的表格

{{ Form:: open(array('url' => 'contact_request#contact')) }}
          {{ Form:: text('name', '', array("class" => "form-control", 'placeholder' => 'Name')) }}
          {{ Form:: email('email', '', array("class" => "form-control", 'placeholder' => 'Email')) }}
          {{ Form:: text('subject', '', array("class" => "form-control", 'placeholder' => 'Subject')) }}
          {{ Form:: textarea ('message', '', array("class" => "form-control", 'placeholder' => 'Your Message')) }}
          {{ Form::submit('SEND', array('class' => 'submit_btn')) }}
        {{ Form:: close() }}

0 个答案:

没有答案