平滑滚动和聚焦文本区域答案

【问题标题】：Smooth scroll and focus textarea平滑滚动和聚焦文本区域
【发布时间】：2014-03-13 02:24:37
【问题描述】：

我想要一个指向页面顶部的链接

<a href="#comment-textarea" id="comment-click">Comment</a>

点击后会滚动到页面底部，也就是表单所在的位置。除了平滑滚动到表单外，它还聚焦于文本区域。

现在我正在将它用于smooth scrolling。

为了专注于文本区域，我正在使用它。

$("#comment-click").click(function() {
  $("#comment-textarea").focus();
});

这是基本的，我知道。这很有效，而且很平滑，但它有问题。单击时，屏幕会闪烁。我认为正在发生的事情是，当我单击链接时，它会直接转到文本区域要聚焦它的页面底部，然后在几毫秒内，它会从页面顶部开始平滑滚动。我该如何解决这个问题？？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在完成滚动后尝试关注您的textarea：

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function () {
                    $("#comment-textarea").focus();
                });
                return false;
            }
        }
    });
});

【讨论】：

这将聚焦#comment-textarea 用于页面上的任何书签。

【解决方案2】：

您可以通过移除上面显示的点击功能并在平滑滚动动画中添加一个oncomplete功能来修复它：

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function(){ // function to focus here
                    $("#comment-textarea").focus();
                });
                return false;
            }
        }
    });
});

【讨论】：

这将集中#comment-textarea 用于所有书签，而不仅仅是评论文本区域。
@SteveFenton 是正确的。但考虑到问题的参数，它应该 A) 足够，并且 B) 给贾斯汀一个很好的起点，以进行未来的发展。

【解决方案3】：

您正在通过焦点调用顺利滚动到书签。

您真的想在动画完成后调用焦点。 hacky 方法是在超时后运行它，但实际上你应该调整平滑滚动脚本以接受将在动画完成后运行的回调。

破解...

$("#comment-click").click(function() {
    window.setTimeout(function () {
        $("#comment-textarea").focus();
    }, 1000);
});

使用“动画完成”回调的示例

$("#comment-click").click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
          }, 1000, function () {
          $("#comment-textarea").focus();
        });
        return false;
      }
    }
  }
});

【讨论】：

感谢@steve 的快速回复。这绝对是有道理的
@Frankenscarf 实际上不会，因为它只绑定到#comment-click。