javascript - 如何在 Next 和 Prev 按钮时水平滚动托盘？

Question

我是开发新手。当我单击下一个和上一个按钮时，我想根据问题编号上下滚动我的问题托盘。

我的 pallet div 包含 200 多个问题(动态)。有时它的问题少于 200 个。

下面是我的最小代码:

在我的下一个按钮下我写了下面的函数

function next(id) {

if (id >= 40 && id < 79) {
    $(".question-container").animate({scrollTop: 370}, 'fast');
}
if (id > 80 && id < 119) {
    $(".question-container").animate({scrollTop: 740}, 'fast');
}
if (id > 120 && id < 159) {
    $(".question-container").animate({scrollTop: 1110}, 'slow');
}
if (id >= 160 && id < 200) {
    $(".question-container").animate({scrollTop: 1480}, 'slow');
}
if (id >= 200 && id < 240) {
    $(".question-container").animate({scrollTop: 1850}, 'slow');
}
if (id >= 240 && id < 300) {
    $(".question-container").animate({scrollTop: 2220}, 'slow');
}

有谁能帮助我吗？

谢谢唐盖维尔

Answer 1

一个简单的解决方案是在检测到目标元素的顶部位置后使用 window.scrollTo()。

function goTo(item) {
  var top = document.getElementById(item).offsetTop;
  window.scrollTo(0, top);
}

p {
  height: 800px;
}

<button onclick="goTo('one')">Scrol to element</button>
<p></p>
<div id="one">one element</div>

作为替代方案，您可以使用 jQuery 插件作为“轮播”。网上有很多，我自己的版本可以在这里找到，如果你有兴趣试一试: https://github.com/gibbok/jquery-slidertv