如何在「下一步」和「上一步」按鈕時水平滾動托盤？

我是新手發展。當我點擊下一個和上一個按鈕時，我想根據問題編號向上和向下滾動我的問題托盤。如何在「下一步」和「上一步」按鈕時水平滾動托盤？

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

如何在「下一步」和「上一步」按鈕時水平滾動托盤？

回答

相關問題