Question

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

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

单击时，滚动到页面底部，表单所在的位置。除了顺利地滚动到表单之外，它还集中了textarea。

现在我将其用于smooth scrolling。

关注textarea，我正在使用它。

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

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

Answer 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;
            }
        }
    });
});

Answer 2

您正在通过焦点调用将平滑滚动到书签。

你真的想在动画完成后调用焦点。 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;
      }
    }
  }
});

Answer 3

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

$(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;
            }
        }
    });
});

平滑滚动和焦点textarea

3 个答案: