平滑滚动以形成并专注于textarea

Question

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

• 让它平滑向下滚动到#form
• 使textarea专注，以便人们可以立即写一条消息

• 保留一些额外的上边距因为我已修复我网站上的顶栏。

  <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作为例子。