javascript - 如何使 map 开启器显示全高？

Question

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

  <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 -->

CSS 是，

.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;
}

但是这个 html 不会给你关于我的问题的完整描述，因此我在这里解释它.. 在一个网站中，我正在使用一个 map 部分，在初始阶段我有一个高度为 150px; 的 map ，以及一个名为“在 map 上找到我们”的文本。当我们点击文本时， map 打开高度为 450px; 的问题，打开的 map 没有向下滚动到完整高度，需要手动向下滚动才能查看完整 map 。我怎么能做它(即，如果我们点击“在 map 上找到我们”， map 容器应该移动到全高而无需手动向下滚动“。 该网站的链接是 http://dev.seyali.com/seyalitechv3/看看这个网站的页脚.. 此链接将为您解决我的问题..

Answer 1

map 的 div 高度正在改变，从而改变了窗口的高度，但窗口滚动位置没有改变，您需要在改变 div 高度时滚动窗口。

要滚动窗口，您可以将点击监听器添加到 map 掩码，如下所示，并使用 jQuery 动画到页面底部。

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

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