jQuery驱动的显示/隐藏链接导致页面滚动

Question

Javascript和jQuery新手在这里。我在我的主页上写了一个链接，该链接应该切换其下方元素中文本块的可见性。这是html，后面是实现show / hide行为的Javascript块。

<a href="#hh_bibtex">Show BibTeX</a>
<div class="bibtex" id="hh_bibtex">
  This text should appear and disappear.
</div>

<script type="text/javascript">

  $("#hh_bibtex").hide();

  $("[href='#hh_bibtex']").click(function(){
    if ( $(this).html() == "Show BibTeX" ) {
      $(this).html("Hide BibTeX");
      $("#hh_bibtex").show();
    } else {
      $(this).html("Show BibTeX");
      $("#hh_bibtex").hide();
    }
  });

</script>

这很好用，除了一个非常烦人的怪癖：当我点击链接显示文本块时，不仅会显示文本，而且页面会立即向下滚动，以便“此文本应该出现并消失”位于最顶端浏览器窗口。这非常迷惑。幸运的是，相反的情况并非如此：当我点击链接使文本消失时，窗口不会滚动。

如何消除这种不受欢迎的滚动？

Answer 1

哎呀，抱歉：找到答案here。

Answer 2

感谢您进行一些跟进并提供您找到答案的链接。对我来说，关键是放置：event.preventDefault();就在click事件之后，在执行我的jquery .show（）方法之前。

 $("#playbuttonahref").click(function() {
        event.preventDefault();
    $("#hiddenvideocontainer").show('slide', { direction: "left" }, 500);
    });