Laravel应用中通过键盘左右箭头触发锚点点击实现内容滚动
解决方案:用键盘箭头触发锚点点击事件
没问题,我来帮你搞定这个需求!之前的代码失效是因为它只监听了文本框的按键事件,而你需要的是在整个页面范围内捕获键盘箭头键的操作,直接触发左右锚点的点击行为。
这里给你调整后的代码,完全适配你的锚点场景:
$(document).ready(function() { // 监听整个文档的键盘按下事件 $(document).keydown(function(e) { // 左箭头键(keyCode 37) if (e.keyCode === 37) { // 可选:阻止浏览器默认的左箭头滚动行为(如果不需要可以删掉这行) e.preventDefault(); // 触发左侧锚点的点击事件 $('#ContentLeft').click(); } // 右箭头键(keyCode 39) else if (e.keyCode === 39) { // 可选:阻止浏览器默认的右箭头滚动行为(如果不需要可以删掉这行) e.preventDefault(); // 触发右侧锚点的点击事件 $('#ContentRight').click(); } }); });
关键说明:
- 改用
keydown事件:keypress主要针对可打印字符,箭头键这类控制键用keydown监听更稳定可靠。 - 绑定到
document:这样不管页面焦点在哪个元素上,按下箭头键都会触发事件,符合你滚动内容的使用场景。 e.preventDefault():如果你的页面在按下箭头键时会默认左右滚动,可以加上这行来阻止这个原生行为,避免和你的自定义滚动逻辑冲突。
另外要确认一下:你的左右锚点应该已经绑定了自定义的内容滚动逻辑(而不是单纯跳转到首页),否则点击后会直接跳转到/哦。如果还没绑定滚动逻辑,你可以给锚点添加onclick事件或者用jQuery绑定click事件来实现内容滚动。
内容的提问来源于stack exchange,提问作者Michiel van Nesselrooij




