本文介绍了使用箭头键和jQuery scrollTo的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 我已经成功实现了scrollTo jQuery插件,当单击链接时,该插件会滚动到下一个div为new的div。不过,我也希望能够使用箭头键向上和向下滚动到同一班级的下一个/上一个div。 我已经看遍了所有互联网,但一直无法找到如何做到这一点。我非常新的JS,所以非常简单的指令,将不胜感激! 这是相关的代码: 您可以使用 keydown 事件监听器来监听按键。您可以在& lt; input& gt; 字段等中使用它。由于keydown事件泡在DOM上,因此您可以在文档 object来捕获页面上的任何按键: $(function(){ $ (document).keydown(function(evt){ alert(Key pressed:+ evt.keyCode); }); }); 每个按键都有一个代码。如果您在网页中使用上述代码,则会看到向下箭头的关键代码为40.如果或 switch 语句在处理程序中: jQuery(function(){ $(document).keydown(function(evt){ if(evt.keyCode == 40){//向下箭头 alert(You pressed down。); } }); }); 现在您需要绑定到实际跳转到下一个标题的代码中。我建议将代码抽象为一个函数,以便您可以将它用于按键和点击。这里是函数,以及使用它的原始代码的变体: //这里是函数: function scrollToNew(){ scrollTop = $(window).scrollTop(); $('。new')。each(function(i,h2){//循环文章标题 h2top = $(h2).offset()。top; //获得文章标题top if(scrollTop< h2top){//比较文档是否低于标题 $ .scrollTo(h2,800); //滚动到第二个的.8中返回false; //退出函数} }); } //这是您的原始代码,修改为使用函数: jQuery(function(){ $ (#next)。click(scrollToNew); }); 最后,您可以添加按键代码并从那里调用该函数: function scrollToNew(){ scrollTop = $(window).scrollTop(); $('。new')。each(function(i,h2){//循环文章标题 h2top = $(h2).offset()。top; //获得文章标题top if(scrollTop< h2top){//比较文档是否低于标题 $ .scrollTo(h2,800); //滚动到第二个的.8中返回false; //退出函数} }); jQuery(function(){ $(#next)。click(scrollToNew); $(如果(evt.keyCode == 40){//向下箭头 evt.preventDefault(); //防止通常的滚动行为 scrollToNew (); //滚动到下一个新标题,而不是} }); }); 更新:向上滚动,做两件事。将 keydown 处理程序更改为: $(document).keydown函数(evt){ if(evt.keyCode == 40){//向下箭头 evt.preventDefault(); //防止通常的滚动行为 scrollToNew(); //滚动到下一个新标题,而不是} else if(evt.keyCode == 38){//向上箭头 evt.preventDefault(); scrollToLast(); } 并写入 scrollToLast() scrollToNew()的$ c>函数可以找到不在页面上的最新新标题: scrollTop = $(window).scrollTop(); var scrollToThis = null; //找到不是在屏幕上的类'new'的最后一个元素: $('。new')。each(function(i,h2){ h2top = $( h2).offset()。top; if(scrollTop> h2top){ //这个不在屏幕上 - make a注意并继续: scrollToThis = h2; } else { //这个在屏幕上 - 最后一个是我们想要的: return false; } }); //如果我们在上面的循环中找到一个元素,请滚动到它: if(scrollToThis!= null){ $ .scrollTo(scrollToThis,800); } } I have successfully implemented the scrollTo jQuery plugin which scrolls to the next div with the class "new" when a link is clicked. However, I would also like to be able to use the arrow keys to scroll up and down to the next/previous divs of the same class.I have looked all over the internet but have been unable to find out how to do this. I am very new to JS so very simple instructions would be appreciated!Here is the relevant code:<script type="text/javascript">jQuery(function($){ $('<div id="next_arrow"></div>') .prependTo("body") //append the Next arrow div to the bottom of the document .click(function(){ scrollTop = $(window).scrollTop(); $('.new').each(function(i, h2){ // loop through article headings h2top = $(h2).offset().top; // get article heading top if (scrollTop < h2top) { // compare if document is below heading $.scrollTo(h2, 800); // scroll to in .8 of a second return false; // exit function } }); });});</script>What do I need to add to this to make the arrow keys work?Thanks,Ted 解决方案 You can use the keydown event listener to listen for keypresses. You can use this on &lt;input&gt; fields and the like. Because keydown events bubble up the DOM, you can use it on the document object to catch any keypress on the page:$(function () { $(document).keydown(function (evt) { alert("Key pressed: " + evt.keyCode); });});Each keypress has a code. If you use the code above in your web page, you'll see that the key code for the down arrow is 40. You can solo this out using an if or switch statement in the handler:jQuery(function () { $(document).keydown(function (evt) { if (evt.keyCode == 40) { // down arrow alert("You pressed down."); } });});Now you need to bind in the code that actually jumps to the next heading. I recommend abstracting the code out into a function so you can use it for both keypresses and clicks. Here is the function, together with a variant of your original code that uses it:// Here is the function:function scrollToNew () { scrollTop = $(window).scrollTop(); $('.new').each(function(i, h2){ // loop through article headings h2top = $(h2).offset().top; // get article heading top if (scrollTop < h2top) { // compare if document is below heading $.scrollTo(h2, 800); // scroll to in .8 of a second return false; // exit function } });}// Here is your original code, modified to use the function:jQuery(function () { $("#next").click(scrollToNew);});Finally, you can add in the keypress code and call the function from there:function scrollToNew () { scrollTop = $(window).scrollTop(); $('.new').each(function(i, h2){ // loop through article headings h2top = $(h2).offset().top; // get article heading top if (scrollTop < h2top) { // compare if document is below heading $.scrollTo(h2, 800); // scroll to in .8 of a second return false; // exit function } });}jQuery(function () { $("#next").click(scrollToNew); $(document).keydown(function (evt) { if (evt.keyCode == 40) { // down arrow evt.preventDefault(); // prevents the usual scrolling behaviour scrollToNew(); // scroll to the next new heading instead } });});Update: To scroll upwards, do two things. Change the keydown handler to: $(document).keydown(function (evt) { if (evt.keyCode == 40) { // down arrow evt.preventDefault(); // prevents the usual scrolling behaviour scrollToNew(); // scroll to the next new heading instead } else if (evt.keyCode == 38) { // up arrow evt.preventDefault(); scrollToLast(); } }and write a scrollToLast() function based off of scrollToNew() that finds the last new heading that isn't on the page:function scrollToLast () { scrollTop = $(window).scrollTop(); var scrollToThis = null; // Find the last element with class 'new' that isn't on-screen: $('.new').each(function(i, h2) { h2top = $(h2).offset().top; if (scrollTop > h2top) { // This one's not on-screen - make a note and keep going: scrollToThis = h2; } else { // This one's on-screen - the last one is the one we want: return false; } }); // If we found an element in the loop above, scroll to it: if(scrollToThis != null) { $.scrollTo(scrollToThis, 800); }} 这篇关于使用箭头键和jQuery scrollTo的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
09-13 15:18
查看更多