マップオープナーをフルハイトで表示するにはどうすればよいですか？

Question

私は次のように、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 --> 

と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はあなたに私の問題についての完全な説明を与えることはありませんので、私はここで説明していますそれについて.. 私は最初の段階で私は150px;の高さの地図を持っているマップセクションを使用していると、 "マップ上で私たちを見つける"というテキストが..テキストをクリックすると、高さ450px;が開かれ、開かれた地図が完全な高さにスクロールしていないという問題が発生します。 （地図上で「Locate us」をクリックすると、地図のコンテナは手動のスクロールダウンなしで完全な高さに移動する必要があります）。 。 サイトのリンクがhttp://dev.seyali.com/seyalitechv3/だったと.. .. このリンク意志はあなたに私の問題をクリアして、このサイトのフッターを見

マップのあなたのdivの高さが変化するため、ウィンドウの高さを変えている

Answer 1

が、ウィンドウのスクロール位置が変更されていない場合は、divの高さの変更時にウィンドウをスクロールする必要があります。

ウィンドウをスクロールするには、以下のようにクリックリスナーをマップマスクに追加し、jQueryを使用してページの下部にアニメーションを付けることができます。

このJSコードをあなたのjavascriptファイルに追加します。

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