jQuery scrollTop 并关注元素

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

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

<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 2

问题是你给它分配了一个点击，而 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

Answer 3

视觉焦点不同于键盘焦点，可以使用focus()函数定义键盘焦点

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

这可以与您的动画功能结合使用。

jQuery scrollTop 并关注元素

jQuery scrollTop and focus on element

html

javascript

css

jquery

accessibility