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>

@DanPhilip This is the gist of it, but the scroll isn't working at all here: codepen.io/ourcore/pen/NpBoRv. — Mario Parra
– Mario Parra, Commented Mar 26, 2017 at 19:28

Dan Philip Bejoy · Accepted Answer · 2017-03-26 19:57:32Z

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>

Thanks! That definitely works as I intended, and you're assuming correctly–this is a mobile menu. Before can you please explain what you corrected? I see you added an additional 350px, but it still looks like you're animating scrollTop and it behaves the same as my original script in my project.
Added position fixed to the parent div and 350 is the offset top value of the container div

Collectives™ on Stack Overflow

Scroll inside overflow DIV on click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related