Jquery прокрутка к новому положению при изменении класса

Question

У меня есть меню, которое меняет класс при навигации. Каждый раз, когда я нажимаю на следующую страницу, класс .active изменяется на фактическую отображаемую страницу.

В приведенном ниже коде класс находится на первой привязке. Когда я перехожу на следующую страницу, класс меняется на второй якорь.

Однако иногда меню становится слишком большим, и необходима прокрутка, поскольку при переходе к последним страницам класс .active больше не используется. просмотрен, и пользователю нужно прокрутить меню вниз, чтобы узнать, на какой странице он находится.

Мне нужно, чтобы когда класс .active изменял прокрутку в меню, менялся вместе с ним, чтобы пользователь не нужно прокрутить.

<ul class="navbar-nav">
  <a id="but-1" href="#" class="nav-link active">Livro </a>
  <a id="but-2" href="#" class="nav-link ">Melhorias</a>
  <a id="but-3" href="#" class="nav-link">Papel</a>
  <a id="but-4" href="#" class="nav-link">Melhor</a>
  <a id="but-5" href="#" class="nav-link ">Capcha n</a>
  <a id="but-6" href="#" class="nav-link ">Op</a>
  <a id="but-7" href="#" class="nav-link">Inclus</a>
  <a id="but-8" href="#" class="nav-link ">Lista d</a>
  <a id="but-9" href="#" class="nav-link ">Possibilidade</a>
  <a id="but-10" href="#" class="nav-link ">Possibilidade</a>
  <a id="but-11" href="#" class="nav-link ">Integra</a>
  <a id="but-12" href="#" class="nav-link ">Posi</a>
  <a id="but-13" href="#" class="nav-link ">Parametriza </a>
  <a id="but-14" href="#" class="nav-link ">Outros </a>
</ul>

Код, который присваивает .active

<script>
    $(document).ready(function () {

        $("#but-1").click(function () {
            $.ajax({
                url: "extra/SaibaLivroDayTrade.html", success: function (result) {
                    $("#div1").html(result);
                }
            });
            $("#but-1").addClass("active");
            $("#but-2").removeClass("active");
            $("#but-3").removeClass("active");
            $("#but-4").removeClass("active");
            $("#but-5").removeClass("active");
            $("#but-6").removeClass("active");
            $("#but-7").removeClass("active");
            $("#but-8").removeClass("active");
            $("#but-9").removeClass("active");
            $("#but-10").removeClass("active");
            $("#but-11").removeClass("active");
            $("#but-12").removeClass("active");
            $("#but-13").removeClass("active");
            $("#but-14").removeClass("active");
        });

        $("#but-2").click(function () {
            $.ajax({

                url: "extra/MelhoriasTelaNegocios.html", success: function (result) {
                    $("#div1").html(result);
                }
            });
            $("#but-1").removeClass("active");
            $("#but-2").addClass("active");
            $("#but-3").removeClass("active");
            $("#but-4").removeClass("active");
            $("#but-5").removeClass("active");
            $("#but-6").removeClass("active");
            $("#but-7").removeClass("active");
            $("#but-8").removeClass("active");
            $("#but-9").removeClass("active");
            $("#but-10").removeClass("active");
            $("#but-11").removeClass("active");
            $("#but-12").removeClass("active");
            $("#but-13").removeClass("active");
            $("#but-14").removeClass("active");
        });
  });

Answer 1

Попробуйте это:

var $container = $("html,body");
var $scrollTo = $('.active');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300); 

Answer 2

Самый быстрый способ, вероятно, Element.scrollIntoView , даже если это не jQuery функция.