ページをスクロールする際の最大高さ遷移を防止するにはどうすればよいですか？

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> 

あなたはそれをクリックしたときに、それはページをリロードしていないため。