如何在“下一步”和“上一步”按钮时水平滚动托盘？

我是新手发展。当我点击下一个和上一个按钮时，我想根据问题编号向上和向下滚动我的问题托盘。如何在“下一步”和“上一步”按钮时水平滚动托盘？

Image attached here

我的托盘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

来源

2017-07-28 Thangavel

一个简单的解决方案可以在检测到目标元素的顶部位置后使用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

来源

2017-07-28 06:52:59 GibboK

使用这个代码

window.scrollBy(0, 10);

在JavaScript通过10px的downwards.You滚动可以相应地调整由u需要滚动像素。参考link

来源

2017-07-28 06:52:27

如何在“下一步”和“上一步”按钮时水平滚动托盘？

回答

相关问题