Прокрутить div до определенного имени класса по горизонтали

Question

У меня есть панель навигации со следующей структурой на моей странице. Я уже написал jQuery, чтобы добавить класс для вкладки «Выбранные», когда я зашел на страницу, и идентифицировать его с помощью некоторого идентификатора, чтобы указать, на какой странице мы находимся. На рабочем столе это выглядит отлично.

Однако, когда я смотрю с мобильного, например, когда я нахожусь на странице последней вкладки (вкладка E), панель навигации по-прежнему будет располагаться в начале панели (Вкладка А). Я хотел бы сделать так, чтобы он прокручивался горизонтально на мобильном телефоне, когда я захожу на эти конкретные страницы.

Кто-нибудь может подсказать, как мне это сделать с помощью jQuery? Большое вам спасибо.

if ($('#pageE').length) {
  $('.navBar .tab').removeClass('selected');
  $('.navBar .tabE').addClass('selected');
}

.navBar {
  width: 100%;
  color: #fff;
  background: #000;
  font-size: 0px;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.navBar .tab {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
  position: relative;
}

.navBar .tab a {
  color: #fff;
}

.navBar .tab.selected a:after {
  content: "";
  display: block;
  background: red;
  margin: 0 auto;
  height: 5px;
  width: 80px;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navBar">
  <div class="tab tabA">
    <a href="pageA">Tab A</a>
  </div>
  <div class="tab tabB">
    <a href="pageB">Tab B</a>
  </div>
  <div class="tab tabC">
    <a href="pageC">Tab C</a>
  </div>
  <div class="tab tabD">
    <a href="pageD">Tab D</a>
  </div>
  <div class="tab tabE selected">
    <a href="pageE">Tab E</a>
  </div>
</div>

Answer 1

Решением может быть использование scrollLeft или animate , если вы хотите плавную анимацию.

var selectedPosition = $(".tab.selected").offset().left;
$(".navBar").scrollLeft(selectedPosition); // without animation.

$('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with an animation

if ($('#pageE').length) {
  $('.navBar .tab').removeClass('selected');
  $('.navBar .tabE').addClass('selected');


  var selectedPosition = $(".tab.selected").offset().left;
  $(".navBar").scrollLeft(selectedPosition); // without smooth.
  // $('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with smooth
}

.navBar {
    width: 100%;
    color: #fff;
    background: #000;
    font-size: 0px;
    padding: 15px 0;
    text-align: center;
    text-transform: uppercase;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .navBar .tab {
    letter-spacing: 2px;
    display: inline-block;
    font-size: 16px;
    padding: 0 20px;
    cursor: pointer;
    position: relative;
  }

  .navBar .tab a {
    color: #fff;
  }

  .navBar .tab.selected a:after {
    content: "";
    display: block;
    background: red;
    margin: 0 auto;
    height: 5px;
    width: 80px;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navBar">
  <div class="tab tabA">
    <a href="pageA">Tab A</a>
  </div>
  <div class="tab tabB">
    <a href="pageB">Tab B</a>
  </div>
  <div class="tab tabC">
    <a href="pageC">Tab C</a>
  </div>
  <div class="tab tabD">
    <a href="pageD">Tab D</a>
  </div>
  <div class="tab tabE">
    <a href="pageE">Tab E</a>
  </div>
</div>

<div id="pageE"></div>

Answer 2

Для горизонтальной прокрутки вы можете использовать scrollIntoView() метод

jQuery

$("#elementID")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
});

JavaScript

var element = document.getElementById("elementID"); 
element.scrollIntoView({behavior: "smooth"});

Answer 3

Вы можете использовать $. ScrollTo :

$(container).scrollTo(target)

Answer 4

Пожалуйста, попробуйте следующий код.

$([document.documentElement, document.body]).animate({
  scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);