javascript - 单击时在溢出 DIV 内滚动

Question

我构建了一个移动菜单 (.menu-wrap)，其中包含一个链接 (#bottom-section)，该链接可切换子菜单 (#support-us-nav) 在 DOM 中，但在用户向下滚动之前它是不可见的。

我正在尝试修改我的 jQuery，它可以切换子菜单，也可以滚动主菜单，这部分工作正常。主菜单在单击时向下滚动，但它会一直滚动到底部，直到到达子菜单的底部，这是主菜单中的最后一个元素。我希望主菜单滚动直到子菜单的顶部到达视口(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 结构:

<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>