I have a link, when clicked, a hidden block opens smoothly, but since the link is at the bottom of the page, I cannot visually see that the block has opened. For this, I would like the page to appear a little to the given diva at the time of its appearance. (in js I'm practically zero)

My code is:

function diplay_hide (clik) { if ($(clik).css('display') == 'none') { $(clik).animate({height: 'show'}, 500); } else { $(clik).animate({height: 'hide'}, 500); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height:350px">HELLO!!!!!</div> <a onclick="diplay_hide('#clik');return false;" class="podrobnee" id="podrobnee" href="#"><i class="fa fa-caret-down" aria-hidden="true"></i> показать подробнее</a> <div style="display:none;" id="clik"> asdasdaasdasd<br/>asdasdasdsadadsadasdasdasdasd<br/>asdasdasdsadadsadasdasdasdasd<br/>asdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsada<br/>dsadasdasdasdasdasdasdasdsadadsadasdas<br/>dasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsa<br/>dadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadas<br/>dasdasda<br/>sdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdsdasdasdsadadsadasdasd </div> dsadasdasdasdasdasdasdasdsadadsadasdas <br/> dasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsa <br/> dadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadas <br/> dasdasda <br/> sdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdsdasdasdsadadsadasdasd <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height:350px">HELLO!!!!!</div> <a onclick="diplay_hide('#clik');return false;" class="podrobnee" id="podrobnee" href="#"><i class="fa fa-caret-down" aria-hidden="true"></i> показать подробнее</a> <div style="display:none;" id="clik"> asdasdaasdasd<br/>asdasdasdsadadsadasdasdasdasd<br/>asdasdasdsadadsadasdasdasdasd<br/>asdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsada<br/>dsadasdasdasdasdasdasdasdsadadsadasdas<br/>dasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsa<br/>dadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadas<br/>dasdasda<br/>sdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdsdasdasdsadadsadasdasd </div>

    1 answer 1

     function diplay_hide(clik) { if ($(clik).css('display') == 'none') { $(clik).animate({ height: 'show' }, 500); $('body').animate({ scrollTop: $(clik).offset().top }, 1000); } else { $(clik).animate({ height: 'hide' }, 500); } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height:350px">HELLO!!!!!</div> <a onclick="diplay_hide('#clik');return false;" class="podrobnee" id="podrobnee" href="/#clik"><i class="fa fa-caret-down" aria-hidden="true"></i> показать подробнее</a> <div style="display:none;" id="clik"> asdasdaasdasd <br/>asdasdasdsadadsadasdasdasdasd <br/>asdasdasdsadadsadasdasdasdasd <br/>asdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsada <br/>dsadasdasdasdasdasdasdasdsadadsadasdas <br/>dasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsa <br/>dadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadas <br/>dasdasda <br/>sdasdasdasdsadadsadasdasdasdasdasdasdasdsadadsadasdasdsdasdasdsadadsadasdasd </div>

    • Thank you very much! It all worked! :-) - Nikolay