2017-07-28 20 views
0

Ich bin Neuling in der Entwicklung. Ich möchte meine Fragenpalette nach oben und unten scrollen, je nach der Frage Nummer, wenn ich auf die nächste und vorherige Schaltfläche klicke.Wie scrolle ich die Palette horizontal, wenn ich die Taste Next und Prev drücke?

Image attached here

Meine Palette div enthält mehr als 200 Fragen (dynamisch). Manchmal hat es weniger als 200 Fragen.

Unten ist mein minimaler Code:

Unter meiner nächsten Taste ich habe folgende Schreibfunktion

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'); 
} 

Jeder konnte Sie in der Lage, mir zu helfen?

Dank Thangavel

Antwort

1

Eine einfache Lösung könnte die window.scrollTo() nach Erkennung der obersten Position Ihres Zielelements verwenden.

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>

Als Alternative Sie eine jQuery-Plugin als "Karussell" nutzen könnten. Es gibt viele online, meine eigene Version ist hier verfügbar, wenn Sie es versuchen möchten: https://github.com/gibbok/jquery-slidertv

0

Verwendung dieser Code

window.scrollBy(0, 10); 

in Javascript von 10px downwards.You blättern kann entsprechend den Pixel einstellen, durch die u blättern müssen. Referenz link

Verwandte Themen