Question

我对JQuery和JavaScript还是很陌生，因为我最近才做过一些自学，所以解决方案可能比我想的要简单。但是，我已经对此进行了大量研究，但是我仍然没有找到解决方案。

我目前正在使用C＃（如果该信息相关）在Web应用程序上工作，并在页面的一侧有一个固定的滚动条。滚动条的底部有一个可折叠列表，并且在我尝试切换它时可以正常运行。

我想知道扩展列表时如何自动滚动到底部。因为它在底部，所以当我尝试扩展它时，I have to scroll again to the bottom to see the new options (click here to see GIF).我希望实现此功能以获得更好的用户体验。而且，将下拉列表移到其他地方对我来说不是一种选择。

这是我的可折叠列表的HTML代码，该列表位于ID为“ sidebar”的导航栏中：

<a href="#pageSubmenu" data-toggle="collapse" onclick="" aria-expanded="false" id="vpninstallation">VPN Installation</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
  <li><a class="nav-link nav-vpn" href="../Mac.aspx">Mac OS</a></li>
  <li><a class="nav-link nav-vpn" href="../Windows.aspx">Windows</a></li>
</ul>

我已经尝试过以下代码：

$("#vpnistallation").click(function () {
  jQuery('#sidebar').animate({ scrollTop: 0 }, 1500); // scroll to bottom
});

$("#vpninstallation").click(function () {
  var window_height = $(window).height();
  var sidebar_height = $('#sidebar').height();
  $('#sidebar').animate({ scrollTop: window_height + sidebar_height }, 'slow', function () {
});

$("#vpninstallation").click(function () {
  $("#sidebar").animate({ scrollTop: $(document).height() }, "slow");
});

我已经研究了很长时间了，我只想解决这个问题，因为这是我最后不知道的事情。任何帮助将不胜感激。谢谢！

侧栏滚动到底部

0 个答案: