jquery - 平滑滚动形成并专注于文本区域

Question

点击链接后，我试图实现 3 件事

• 使其平滑向下滚动到#form
• 使文本区域有焦点，以便可以立即写消息

• 保持一些额外的顶部边距，因为我的网站上有固定的顶部栏。

  <a class="link" href="#form">Go to form</a>
  <div id="form" style="padding-top: 100px; margin-top: -100px;">
      <textarea class="textarea"></textarea>
  </div>
  

我将其用于上边距:

padding-top: 100px; margin-top: -100px;

我正在尝试 jQuery，但无法让所有功能同时工作。

Answer 1

我不确定这是否是您想要的，但您可以使用 jQuery 滚动到元素 - 偏移 + 动画:

 $("#clickedElement").click(function() {
    $('html, body').animate({
        scrollTop: $("#textAreaFocused").offset().top-200
    }, 2000, function(){$( "#textAreaFocused" ).focus();});
});

当然，这只是您可以使用的示例。您将需要调整值以适合您的风格。我以 -200 为例。