Scroll inside overflow DIV on click

Question

I've built a mobile menu ( .menu-wrap ) that includes a link ( #bottom-section ), which toggles a sub-menu ( #support-us-nav ) in the DOM, but it's not visible until the user scrolls down.

I'm trying to modify my jQuery, which toggles the sub-menu, to also scroll the main menu, which is partly working. The main menu scrolls down on click, but it scrolls all the way to the bottom until it reaches the sub-menu's bottom, which is the last element in the main menu. I'd like the main menu to scroll until the sub-menu's top reaches the top of the viewport.

$('#bottom-section').on('click', function(event) {
  event.stopPropagation();
  $('#support-us-nav').fadeToggle();
  $('#lc-nav .menu-wrap').animate({
    scrollTop: $('#support-us-nav').offset().top
  }, 1000);

});

HTML structure:

<div class="menu-wrap">
  <div class="menu-sidebar">
    <div id="nav-account" class="mobile-only"></div>
    <ul id="top-section" class="submenu"></ul>
    <ul id="middle-section" class="submenu"></ul>
    <ul id="bottom-section" class="submenu"></ul>
    <div id="support-us-nav"></div>
  </div>
</div>

Answer 1

Corrected the code from your codepen. You were trying to animate scrollTop on .menu-wrap which did not have a fixed height. I'm assuming you intended it to extend through the full height of the screen, thus position:fixed; and also added an offset top correction as it is calculated relative to its fixed parent.

 $('#bottom-section').on('click', function(event) { $('#support-us-nav').fadeToggle(); $('.menu-wrap').animate({ scrollTop: $('#support-us-nav').offset().top + 350 }, 1000); }); 

 .menu-wrap { position: fixed; overflow-y: scroll; z-index: 500; top: 0; width: 280px; height: 100%; transition: 0.25s; .menu-sidebar { position: relative; padding: 30px; #nav-account.mobile-only { display: flex; justify-content: space-between; padding: 0 15px 30px; } li > a { position: relative; opacity: 1; &:hover::after { background-position: -100% 0; } } .menu-item-has-children { position: relative; .sub-menu { display: none; } } ul.submenu { padding-bottom: 30px; &:hover li { opacity: 0.5; &:hover { opacity: 1; } } } #top-section { li { padding: 10px 15px; a { display: flex; justify-content: space-between; align-items: center; img { display: inline-block; width: 25px; } } } } #middle-section { li { padding: 3px 15px; line-height: 1; } } #bottom-section { li { padding: 0 15px; } } } } #support-us-nav { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu-wrap"> <div class="menu-sidebar"> <div id="nav-account" class="mobile-only">Some text</div> <ul id="top-section" class="submenu"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> <ul id="middle-section" class="submenu"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> <ul id="bottom-section" class="submenu"> <li>Tigger Link</li> </ul> <div id="support-us-nav"> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> <li>Support Us Nav Link</li> </div> </div> </div>