2

I'm pretty new to JQuery and JavaScript, as I've only done some self-learning recently, so the solution might be simpler than I think. However, I've done quite a lot of research about it already, but I still haven't found a solution.

I'm currently working on a Web App in C# (if that information is relevant), with a fixed scrollbar at the side of the page. The bottom of the scrollbar has a collapsible list, and functions properly when I try to toggle it.

I was wondering how to auto scroll to the bottom when I expand the list. Because it's on the bottom, when I try to expand it, I have to scroll again to the bottom to see the new options (click here to see GIF). I was hoping to implement this for better UX. Moreover, moving the drop down elsewhere is not an option for me.

Here's my HTML code for the collapsible list, which is inside a nav with 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>

I've tried these codes already:

$("#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");
});

I've been at it for quite some time already, and I just want to get this over with because it's the last thing I haven't figured out. Any help would be highly appreciated. Thanks!

ProgrammingLlama
  • 36,677
  • 7
  • 67
  • 86
Mika
  • 21
  • 3
  • Did you look into [these answers](https://stackoverflow.com/questions/27980084/scrolling-to-a-element-inside-a-scrollable-div-with-pure-javascript)? Forget about `animate` for just a second and try to simply scroll – Adelin Jul 09 '18 at 08:54
  • Hey @Adelin , I checked and tried those out yesterday, but they still didn't work for me. Maybe it's because when I click on the link, it toggles the drop down after scrolling to the bottom? I've tried to simulate it in CodePen.io, and I wasn't able to successfully make it work with drop downs. – Mika Jul 11 '18 at 01:08

0 Answers0