点击锚点时切换input状态并自动滚动定位的jQuery实现问题

你可以直接用jQuery的focus()方法实现input自动聚焦，浏览器原生会自动将聚焦的元素滚动到视口内，如果需要自定义平滑滚动效果可以参考下方两种实现：

方案1：最简实现（无自定义平滑滚动） #

直接调用input的focus()方法即可，浏览器会自动完成滚动+聚焦的效果，代码如下：

$('a.button[href="#view"]').click(function(e) {
  e.preventDefault();
  $('#a').focus();
});

方案2：自定义平滑滚动效果 #

如果需要控制滚动速度、滚动到指定区块位置，可以用animate实现滚动动画，滚动完成后再触发聚焦：

$('a.button[href="#view"]').click(function(e) {
  // 阻止a标签默认锚点跳转行为
  e.preventDefault();
  // 定义滚动目标位置，这里取#view区块的顶部距离，也可以替换为$('#a').offset().top直接对齐input
  const scrollTarget = $('#view').offset().top;
  // 300为滚动动画耗时，单位毫秒，可自行调整
  $('html, body').animate({
    scrollTop: scrollTarget
  }, 300, function() {
    // 滚动动画完成后触发input聚焦
    $('#a').focus();
  });
});

注意事项 #

• 如果你的input是隐藏后显示的元素，需要确保触发focus时元素已经处于可见状态，否则聚焦不会生效
• 如果需要选中input内的已有内容，可以把$('#a').focus()替换为$('#a').focus().select()

内容的提问来源于stack exchange，提问作者emily33