Javascript 平滑滚动并聚焦文本区域

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

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

---

这是基本的，我知道。这工作，它顺利，但它的车。单击后，屏幕会闪烁。我想，当我点击链接时，它会直接进入页面底部，文本区域将其聚焦，然后在毫秒内，它会从页面顶部开始平滑滚动。如何解决此问题？？？

您正在使用focus呼叫平滑滚动至书签

您确实希望在动画完成后调用focus。黑客的方法是在超时后运行它，但实际上，您应该调整平滑滚动脚本，以接受将在动画完成后运行的回调

黑客

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

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

---

在完成滚动后，尝试聚焦您的

文本区域

：

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

---

您可以通过删除上面显示的单击功能并向平滑滚动动画添加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;
            }
        }
    });
});

---

这将关注页面上任何书签的评论文本区。感谢@steve的快速回复。这肯定会让你sense@Frankenscarf实际上它不会，因为它只绑定到

#comment click

。这将聚焦所有书签的

#comment textarea

，而不仅仅是comment textarea。@SteveFenton是正确的。但考虑到问题的参数，它应该A）足够了，B）为贾斯汀的未来发展提供了一个良好的起点。

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

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