Question

我有一个原始最大高度为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");
      });

    });

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

Answer 1

尝试改变：

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

为：

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

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

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

1 个答案: