单击按钮时如何防止页面向上滚动

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();
}); 

注意函数bracket中的e。

Answer 2

尝试阻止链接的默认操作。

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