Javascript jQuery-滚动点击特定元素时自动输入焦点

我使用的jQuery插件名为 使用滚动动作

我想要实现的是在视口中的部分的第一个输入元素上设置焦点，并在向下滚动时将焦点移动到下一个相应部分的输入。而且，当滚动回到上面的第一部分时，它应该将焦点设置回第一部分的输入

以下是我使用上述插件的实际工作设置。 不幸的是，我无法在我的系统中真正启动并运行插件

此代码块用于在页面加载时设置焦点，并在向下滚动时将焦点更改为目标输入 但滚动回到顶部并不会使焦点返回

(function($) {

var firstInput = $('section').find('input[type=text]').filter(':visible:first');

if (firstInput != null) {
    firstInput.focus();
}

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
});

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
}, {
    offset: function () {
        return -$(this).height();
    }
});

});

这是我的 没有插件部分

只要有人能解释在普通jQuery中应该如何做

---

如果不熟悉这个插件。

jQuery Waypoints使用起来非常简单。我还没有尝试过你的代码，但我已经完成了：

$('input:first').focus();

$('section').waypoint(function() {
    $(this).find('input:first').focus();
});

请看这个

但是，使用鼠标滚轮向下滚动时，滚动条有时会在中间部分向后跳。这可能是浏览器对输入焦点的反应。我还没有看完全部文档，但是没有输入焦点的示例

---

如果你只是想完成这个简单的任务，我建议你放弃这个插件。我可以向您展示如何使用jQuery完成这项工作

您可以使用jQuery的

scroll（）

函数处理滚动。您需要获取滚动事件上的

scrollTop（）

，然后将其与

的顶部

offset（）

进行比较

$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
$（'input[type=text]'）。每个（函数（）{
var offset=$（this.offset（）；
如果（st>=offset.top-20&&st

---

以下是。

只需将插件添加为外部资源：@mplungjan Hi，这是插件的CDN吗？我不知道CDN可用于不太重要的插件。不，这是作者示例页面中的js文件，可以增加他的带宽吗？你为什么不复制整个代码并粘贴到你的小提琴上进行测试呢？是的，我在小提琴上也有同样的跳跃问题。它现在在我的工作环境中工作得很好。唯一增加的部分是在链式航路点函数上使用

方向

，当上下滚动时，我给了它不同的偏移值。如果没有这一点，当向上滚动时，最上面的部分将不会击中目标。我还将尝试一下普通的jquery方法。感谢您的全面投入。

$(window).scroll(function(){
    var st = $(this).scrollTop();
    $('input[type=text]').each(function(){
        var offset = $(this).offset();

        if(st >= offset.top -20 && st < offset.top + $(this).height()){
            $(this).focus();  
        } 
    });  
});