Question

我点击链接时使用以下功能将页面滚动到特定元素，这很好用：

5.5

我试图添加一个focus（）事件来专注于整个表单元素。它无法正常工作，我无法弄清楚原因。我尝试了以下代码的几种变体：

$('a.scroll-link').on('click', function(event) {
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();               
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

变体＃2：

$('a.scroll-link').on('click', function(event) {
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();
        $('#mainForm').focus();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

带超时的变体＃3：

$('a.scroll-link').on('click', function(event) {
    $('#mainForm').focus();
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

它们都不起作用。仅供参考，我将focus（）更改为addClass（）函数，这很好用。但是焦点是首选，因为当选择单个输入时它会消失。在聚焦输入时，我不必编写另一个函数来删除类。非常感谢。

Answer 1

您确定使用.focus()来关注表单吗？在大多数情况下，焦点将在一个输入字段中用于用户输入，您应该选择该表单中的输入字段，但不是全部。

Answer 2

请你参考这个链接，这是点击功能里面使用的代码

$( "#other" ).click(function() {
  $( "#target" ).focus();
});

访问https://api.jquery.com/focus/

Answer 3

所以我实际上是自己想出来的。它与jQuery代码无关，而是与HTML有关。为了使.focus()对<form>之类的元素产生影响，需要设置tabindex值才能使其可聚焦。所以我更新了我的html，看起来像这样：

<form name="mainForm" id="mainForm" tabindex="-1">

添加tabindex值可使其正常工作。如果有人关心，我将以下内容用于我的jQuery代码，以便页面滚动在焦点之前发生。否则，当页面首先聚焦时，页面将移动到表单的底部，然后向上滚动到表单的开头：

$('a.slide-down').on('click', function(event) {
  var target = $(this).attr('href')
  if (target.length) {               
      event.preventDefault();
      $('html, body').animate({
          scrollTop: $(target).offset().top
      }, 800);
      $('#mainForm').focus();
    }
});

感谢大家的其他建议。

.focus（）在里面没有工作.on（＆＃39;点击＆＃39;，功能（事件）

3 个答案: