单击时在溢出DIV中滚动

Question

我建立了一个移动菜单（ .menu-wrap ），其中包含一个链接（ #bottom-section ），该链接可在DOM中切换一个子菜单（ #support-us-nav ），但是直到用户滚动时该菜单才可见下。

我正在尝试修改我的jQuery（可切换子菜单），使其也滚动主菜单（部分起作用）。 单击时，主菜单向下滚动，但一直滚动到底部，直到到达子菜单的底部，该菜单是主菜单中的最后一个元素。 我想滚动主菜单，直到子菜单的顶部到达视口的顶部。

$('#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结构：

<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

更正了代码笔中的代码。 您正在尝试为.menu-wrap上的动画scrollTop动画设置高度（没有固定高度）。 我假设您打算将其扩展到整个屏幕高度，因此position:fixed; 并且还添加了相对于其固定父级计算的偏移顶部校正。

 $('#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>