You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动