javascript - jQuery scrollTop and focus on element - Stack Overflow

admin管理员组

文章数量:1426468

I have the following scrollTop function:

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

However, when you use your keyboard to navigate the focus does not go to the top. It remains in the footer. Is there a way to bring the focus to the following div:

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

I have the following scrollTop function:

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

However, when you use your keyboard to navigate the focus does not go to the top. It remains in the footer. Is there a way to bring the focus to the following div:

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

• javascript
• jquery
• html
• css
• accessibility

Share Improve this question Follow asked Nov 11, 2015 at 16:00 j00mj00m 50188 silver badges2222 bronze badges 2

• "...keyboard to navigate..." you mean tab + enter on element? – Kriggs Commented Nov 11, 2015 at 16:02
• @Kriggs, yes I mean tab then enter. – j00m Commented Nov 11, 2015 at 16:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The visual focus is different from the keyboard focus, you can use the focus() function to define the keyboard focus

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

This can be used conjointly with your animate function.

Animated scrolling to the top of the element, then setting a focus:

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

The problem is that you have assignd a click to it, while enter is a keypress, you have to set it both, here's one way to do it with jQuery delegation:

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

本文标签： javascriptjQuery scrollTop and focus on elementStack Overflow