jquery - 单击按钮时如何防止页面向后滚动

Question

我有一个网站正在使用 twitter bootstrap 的轮播示例，可在此处找到 http://twitter.github.io/bootstrap/examples/carousel.html

在轮播下方，我使用其流体行添加了另一个部分。基本上，在这个新行中我添加了 3 个 div。每个 div 中都嵌入了一个表单。下面以一个 div 为例:

<div class="row-fluid">
      <div class="span4 package">
        <h2>Package 1</h2>
        <p>A basic package that ....includes blah blah blah </p>
          <ul>
          <li>a</li>
          <li>br</li>
          <li>c</li>
          <li>d</li>
          </ul>
        </p><br/>
        <p><a class="btn btn-info" href="#" id="q1btn">Request a Quote &raquo;</a></p><br/>

          <div id="quote1">
              <form action="quote.php" method="post">
                  <table width="400" border="0" cellspacing="2" cellpadding="0">
                  <tr>
                      <td width="29%" class="bodytext">Name:</td>
                      <td width="71%"><input name="name" type="text" id="q1name" size="32" autofocus></td>
                  </tr>
                  <tr>
                      <td class="bodytext">eMail:</td>
                      <td><input name="email" type="text" id="email" size="32"></td>
                  </tr>
                  <tr>
                      <td class="bodytext">Message:</td>
                      <td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td>
                  </tr>
                  <tr>
                      <td class="bodytext"> </td>
                      <td align="left" valign="top"><input type="submit" name="Submit" value="Send"></td>
                  </tr>
                  </table>
              </form>
        </div>
      </div>

我正在使用 jquery 来切换此表单的可见性...如下所示:

  $(document).ready(function() {
      $('#quote1').hide();
  });

  $("#q1btn").click(function() {
      $('#quote1').toggle();
      $('#q1name').get(0).focus();
  }); 

一切正常，尽管这可能不是最好的方法。 (我打算将表单中的表格更改为div...)

但我不明白的一件事是，为什么当我单击“请求报价”按钮时页面会自动滚动回顶部。然后我必须向下滚动回到页面才能看到表单。我认为将焦点设置在表单中的名称字段上可以解决此问题，但这并没有什么区别。

是否有可能是轮播造成的？我注意到轮播代码在某处包含使图片每隔几秒自动更改一次的逻辑...

如有任何建议，我们将不胜感激。谢谢。

Answer 1

这是 a 标记的默认行为。为了防止这种情况发生，您可以在事件上应用名为 .preventDefault 的东西。像这样编写你的函数:

$("#q1btn").click(function(e) {
    e.preventDefault();
    $('#quote1').toggle();
    $('#q1name').get(0).focus();
}); 

注意函数braket 中的e。