如何防止最大高度转换将页面滚动到顶部？答案

【问题标题】：how do I prevent max-height transition from scrolling the page to the top?如何防止最大高度转换将页面滚动到顶部？
【发布时间】：2016-11-16 16:38:36
【问题描述】：

我有一个原始最大高度为 0 的 div 最初隐藏它，并且通过点击锚点它被赋予最大高度 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");
      });

    });

那么为什么每次转换都会滚动到顶部？以及如何解决？

【问题讨论】：

标签： jquery html css scroll css-transitions

【解决方案1】：

尝试改变：

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

到：

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

因为当你点击它时它不会重新加载页面。

【讨论】：