Question

我有以下scrollTop函数：

<a onclick="jQuery('html,body').animate({scrollTop:0},'slow');return false;" class="well well-sm" href="#">
                    <i class="uxf-icon uxf-up-open-large"></i><span class="sr-only">${message:backToTop}</span></a>

但是，当您使用键盘导航时，焦点不会转到顶部。它仍然在页脚中。有没有办法把焦点放在下面的div：

<div id="top" tabindex="-1"></div>

Answer 1

视觉焦点与键盘焦点不同，您可以使用focus()功能来定义键盘焦点

 <a onclick="jQuery("#top").focus();return false;" class="well well-sm" href="#">...</a>

这可以与你的动画功能一起使用。

Answer 2

动画滚动到元素的顶部，然后设置焦点：

<script>
    function scroll() {
        $('html, body').animate({
            scrollTop: $('#top').offset().top
        }, 'slow', function() { 
            $('#top').focus(); 
        });
    }
</script>
<a onclick="scroll(); return false;" class="well well-sm" href="#">...</a>

Answer 3

问题是你已经点击了它，而enter是一个按键，你必须同时设置它，这是使用jQuery委托执行此操作的一种方法：

function animateToTop() {
    $('html,body').animate({
        scrollTop: $('#top').offset().top
    }, 'slow');
}

$('#aSendToTop').on('click keypress',
    function (e) {
        // mouse 1 has keyCode 1, while enter is keycode 13
        if( [1, 13].indexOf(e.which) > -1 ) animateToTop();
    }
);

JSFiddle

jQuery scrollTop并专注于元素

3 个答案: