how to set focus on top of the page

Question

How do I set focus to the top of a page?

This is barely even a question, and it's certainly not understandable enough to begin to answer. And I'm pretty sure I'm not alone with this feeling. — lc., Jun 02 '10 at 10:37
Maybe @vakas was looking to set focus back to the initial point where the tab key would change the focus to a Skip to Content link or the top navigation (like when the page first loads). That was the question that brought me to this page. My solution, after the scroll finishes, is to set documentElement.tabIndex = 0; ([Chrome needs that](https://bugs.chromium.org/p/chromium/issues/detail?id=467043)) and then call documentElement.focus();. That puts the focus the way it is when the page first loads (at least for Chrome, Firefox, Edge, IE 9-11, and Opera – haven’t tested it in Safari). — Rich DeBourke, Sep 09 '18 at 04:23
The "**This question already has answers here:**" suggestion is misleading. The OP wanted to setting focus, not scrolling. — Ian Y., Jan 19 '20 at 10:13
Adding vote to reopen so we can properly answer this question about focus, not scrolling, as it is a vital topic to web accessibility. — James Tomasino, Aug 13 '20 at 13:01

score 31 · Answer 1 · edited Dec 29 '12 at 22:49

31

I found this use of the window.scrollTo function:

window.scrollTo(0,0);

edited Dec 29 '12 at 22:49

Nick

answered Dec 29 '12 at 22:28

Gotter

score 6 · Answer 2 · edited May 23 '17 at 12:32

Below are the mainly suggested methods,

Javascript to scroll to top coordinate.

window.scrollTo(0,0);

Syntax is,

window.scrollTo(x-coord, y-coord);

scroll up using jquery,

$("html, body").animate({ scrollTop: 0 }, "slow");

navigate/scroll to a particular element using javascript,

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

simple javascript way to focus on top,

window.location = '#'

score 2 · Answer 3 · answered Jun 02 '10 at 10:40

2

document.location.href = "#";

will scroll back up, but will also add a '#' to your URL, but given the question, I could have just answered

functionToSetFocusOnTopOfPage();

and it would be just as good

answered Jun 02 '10 at 10:40

Yanick Rochon

Starx · Answer 4 · 2010-06-02T10:50:54.230

It would be helpful if you write a little so that we can understand your problem.

A very easy way is linking to class or id on a page.

For example this page "page.html"

<body>
        <div id="top"> ..................Content................</div>
        <div id="otherdiv">........................</div>
</body>

then if you need to focus on top, send a link like "page.html#top" the page will automatically focus on top

or if you want to stick to javascript then do this

document.location.href = '#top'; //to send it to the top

But I would say use simple html anchor to go to top like

<a href="#top">Back to Top</a>

4 Answers4