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>