当我的下一个和上一个按钮时，如何水平滚动托盘？

Question

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

我的托盘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');
}

任何人都可以帮助我吗？

由于 Thangavel

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插件作为“carousel”。如果您有兴趣尝试，有许多在线，我自己的版本可用： https://github.com/gibbok/jquery-slidertv

Answer 2

使用此代码

 window.scrollBy(0, 10);

在javascript中向下滚动10px。您可以相应地调整您需要滚动的像素。 参考link