J'ai une barre de navigation avec la structure suivante dans ma page. J'ai déjà écrit le jQuery pour ajouter une classe pour l'onglet "Sélectionné" lorsque je suis entré dans la page et l'identifier avec un ID pour indiquer sur quelle page nous sommes. Cela semble bien sur un bureau.

Cependant, lorsque je regarde avec un mobile, comme lorsque je suis sur la page du dernier onglet (onglet E), la barre de navigation se positionnera toujours au début de la barre (onglet A). Je voudrais le faire défiler horizontalement sur mobile lorsque j'arrive sur ces pages spécifiques.

Quelqu'un peut-il suggérer comment je peux le faire avec jQuery? Merci beaucoup.

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>
3
Sammi 7 nov. 2019 à 12:02

4 réponses

Meilleure réponse

Une solution pourrait être d'utiliser scrollLeft ou animer si vous voulez une sorte d'animation fluide.

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>
2
ReSedano 7 nov. 2019 à 11:06

Pour le défilement horizontal, vous pouvez utiliser la méthode scrollIntoView()

JQuery

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

Javascript

var element = document.getElementById("elementID"); 
element.scrollIntoView({behavior: "smooth"});
2
JAY PATEL 7 nov. 2019 à 10:51

Veuillez essayer le code ci-dessous.

$([document.documentElement, document.body]).animate({
  scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
0
Rory McCrossan 7 nov. 2019 à 09:18

Vous pouvez utiliser $ .scrollTo:

$(container).scrollTo(target)
1
Rory McCrossan 7 nov. 2019 à 09:18