Javascript 水平滚动div到某个类名

我的页面中有一个具有以下结构的导航栏。我已经编写了jQuery，在我进入页面时为“Selected”选项卡添加了一个类，并用一些ID标识该类，以指示我们在哪个页面上。这在桌面上看起来不错

但是，当我使用移动设备查看时，就像我在最后一个选项卡（选项卡E）的页面上一样，导航栏仍将位于导航栏（选项卡A）的开头。我想让它在手机上水平滚动，当我来到这些特定的页面

有人能建议我如何使用jQuery吗？非常感谢你

if（$（'#pageE'）.length）{
$（'.navBar.tab'）.removeClass（'selected'）；
$（'.navBar.tabE'）.addClass（'selected'）；
}

.navBar{
宽度：100%；
颜色：#fff；
背景：#000；
字体大小：0px；
填充：15px0；
文本对齐：居中；
文本转换：大写；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
}
.导航栏.选项卡{
字母间距：2px；
显示：内联块；
字体大小：16px；
填充：0 20px；
光标：指针；
位置：相对位置；
}
.导航栏.选项卡a{
颜色：#fff；
}
.navBar.tab.selected a:之后{
内容：“；
显示：块；
背景：红色；
保证金：0自动；
高度：5px；
宽度：80px；
位置：绝对位置；
底部：-15px；
左：0；
右：0；
左边距：自动；
右边距：自动；
}

---

请尝试以下代码

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

您可以使用：

---

对于水平滚动，您可以使用

scrollIntoView（）

方法

jQuery

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

JavaScript

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

---

解决方案可以是使用，或者如果您想要一种平滑的动画

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）；//不带平滑。
//$（'.navBar'）.animate（{scrollLeft:selectedPosition}，400）//使用平滑
}

.navBar{
宽度：100%；
颜色：#fff；
背景：#000；
字体大小：0px；
填充：15px0；
文本对齐：居中；
文本转换：大写；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
}
.导航栏.选项卡{
字母间距：2px；
显示：内联块；
字体大小：16px；
填充：0 20px；
光标：指针；
位置：相对位置；
}
.导航栏.选项卡a{
颜色：#fff；
}
.navBar.tab.selected a:之后{
内容：“；
显示：块；
背景：红色；
保证金：0自动；
高度：5px；
宽度：80px；
位置：绝对位置；
底部：-15px；
左：0；
右：0；
左边距：自动；
右边距：自动；
}

它正在工作！非常感谢你的建议！对scrollTop无法水平滚动。但无论如何，谢谢你的帮助！嗯。我忘了把scrollTop换成scrollLeft。我从我的一段代码中粘贴了这段代码，所以忘了更改。不过，很高兴你得到了答案。

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

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