Javascript 如何使地图开启器显示全高？

我有一个带有html的地图部分，如下所示

  <div id="map-section" class="map-section">
    <!-- map opener -->
    <div id="map-opener" class="map-mask" style="opacity:0.5;">
      <div class="map-opener">
        <div class="font-second">locate us on the map<i class="ci-icon-uniE930"></i></div>
        <div class="font-second">close the map<i class="ci-icon-uniE92F"></i></div>
      </div>
    </div>
    <!--/ End map opener -->
    <div id="map-container">
    </div>
  </div>
  <!--/ End Map Section -->

但是这个html不会给你关于我的问题的完整描述，因此我在这里解释它。。 在一个网站中，我使用了一个地图部分，在该部分中，我在初始阶段拥有高度为150px的地图，还有一个名为“在地图上找到我们”的文本。。当我们点击文本时，地图的高度为450px；打开后，出现了一个问题：打开的地图没有向下滚动到最大高度，需要手动向下滚动以查看完整地图。。我该怎么做呢？也就是说，如果我们单击“在地图上定位我们”，地图容器应该移动到全高，而无需手动向下滚动。。 该网站的链接已被删除，请查看该网站的页脚。。

---

此链接将为您清除我的问题。

您的地图分区高度正在更改，因此更改了窗口高度，但窗口滚动位置没有更改，您需要在更改分区高度时滚动窗口

要滚动窗口，您可以将单击侦听器添加到地图掩码，如下所示，并将其动画显示到页面usng jQuery的底部

将此JS代码添加到javascript文件中

.map-section {
  height: 150px;
  overflow: hidden;
  position: relative;
  -webkit-transition: height 0.2s ease-out;
  transition: height 0.2s ease-out;
}
.map-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  z-index: 4;
}
.map-mask .row {
  position: relative;
}
.map-mask .row > div {
  position: relative;
  top: 50%;
}
.map-opener {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -200px;
  width: 400px;
  height: 50px;
  overflow: hidden;
  line-height: 50px;
  text-align: center;
  font-weight: 400;
}
.map-opener div {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.map-opener div:first-child {
  opacity: 1;
}
.map-opener div:nth-child(2) {
  margin-top: -50px;
  opacity: 0;
}
.map-opener i {
  font-size: 28px;
  vertical-align: middle;
}
.map-opener i:before {
  display: inline;
}
.map-opened {
  height: 450px;
}
.map-opened .map-mask {
  height: 100px;
}
.map-opened .map-opener div:first-child {
  opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
  opacity: 1;
}

$('.map-mask').on('click',function(){
     $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});