我正在使用 jQuery 的 scrollTo使用向上箭头和向下箭头上下滚动我的页面的插件。
我有一堆类为“screen”的div,如下所示:<div class="screen-wrapper">...</div>
我想做的是,当我按下向上或向下键时,窗口会滚动到下一个或上一个类为“屏幕”的 div。
我已经处理好按键。 根据插件文档,要滚动窗口,您可以使用 $.scrollTo(...);
这是我的代码:
$(document).keypress(function(e){
switch (e.keyCode) {
case 40: // down
n = $('.screen-wrapper').next()
$.scrollTo( n, 800 );
break;
case 38: // up
break;
case 37: // left
break;
case 39: // right
break;
}
});
如果有帮助,这里是 HTML div。我在页面上有一些这样的内容,本质上,我正在尝试通过按下向下箭头滚动到下一个:
<div class='screen-wrapper'>
<div class='screen'>
<div class="sections">
<ul>
<li><img src="images/portfolio/sushii-1.png " /></li>
<li><img src="images/portfolio/sushii-2.png" /></li>
<li><img src="images/portfolio/sushii-3.png" /></li>
</ul>
</div>
<div class="next"></div>
<div class="prev"></div>
</div>
此外,如果需要,我可以提供一个链接,如果它可以帮助其他人获得更好的主意的话。
编辑 而且,我忘了提及这里真正的问题是什么。 问题是它不会向下滚动超过第一个元素,正如 seth 提到的那样。
最佳答案
这里没有真正的问题,但我猜问题是您的页面没有滚动到第一个页面。这是因为你在每次按键时调用它:
n = $('.screen-wrapper').next()
它可能会在您每次调用它时返回相同的结果。尝试将实例化移到按键之外。
var s = $('.screen');
var curr=-1, node;
$(document).keypress(function(e){
switch( e.keyCode ) {
case 40:
node = s[++curr];
if (node) {
$.scrollTo( node,800);
}
else {
curr = s.length-1;
}
break;
case 38:
node = s[--curr];
if (node) {
$.scrollTo( node ,800);
}
else {
curr = 0;
}
break;
}
});
关于javascript - 通过按键和 scrollTo 插件向下滚动到下一个元素 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1146748/