jquery - 如何防止最大高度过渡将页面滚动到顶部？

Question

我有一个原始最大高度为 0 的 div，最初将其隐藏，通过点击 anchor ，它的最大高度为 800px 以显示它。基本的东西。但是，每当发生此转换时，它都会自动将页面滚动到顶部，而不是将页面保留在其所在的任何位置。

这是 html:

<main class="outer-container">
  <div class="wrapper">
    <div class="text-container">
      <div class="text">

        <a class="reveal-hide" href="#">Show Hidden Div</a>

        <div class="hide">

         <!-- hidden div -->

        </div>
     </div>   
    </div>
  </div>
</main>

和 CSS:

.outer-container {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
.wrapper {
  margin-top: 100px;
  box-sizing: border-box;
  padding: 30px;
  position: relative;
}
.text-container {
  max-width: 600px;
  padding: 30px;
  margin: 0 auto;
}
.hide {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
  -o-transition: max-height 0.4s ease-in-out;
  transition: max-height 0.4s ease-in-out;
}
.hide-is-showing {
  max-height: 1000px;
}

和 jQuery:

    $(document).ready(function() {

      $('.reveal-hide').on('click', function() {
        $(".hide").addClass("hide-is-showing");
      });

    });

那么为什么每次转换时它都会滚动到顶部？我该如何解决这个问题？

Answer 1

尝试改变:

 <a class="reveal-hide" href="#">Show Hidden Div</a>

至:

<a class="reveal-hide" href="javascript:void(0)">Show Hidden Div</a>

因为这样当您单击它时它不会重新加载页面。