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

【问题标题】：How to scroll pallet horizontally when i Next and Prev button?当我下一个和上一个按钮时如何水平滚动托盘？
【发布时间】：2017-07-28 06:44:44
【问题描述】：

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

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

谁能帮帮我？

谢谢唐加维尔

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

【解决方案2】：

使用此代码

 window.scrollBy(0, 10);

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

【讨论】：