Programmatically scroll to an Anchor Tag

Consider the following code:

<a href="#label2" rel="nofollow noreferrer noopener">GoTo Label2</a>
... [content here] ...
<a name="label0"></a>More content
<a name="label1"></a>More content
<a name="label2"></a>More content
<a name="label3"></a>More content
<a name="label4"></a>More content

Is there a way to emulate clicking on the “GoTo Label2” link to scroll to the appropriate region on the page through code?

EDIT: An acceptable alternative would be to scroll to an element with a unique-id, which already exists on my page. I would be adding the anchor tags if this is a viable solution.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This JS has generally worked well for me if you also put an ID on the element:

document.getElementById('MyID').scrollIntoView(true);

This is good as it will also position scrollable divs etc so that the content is visible.

Method 2

Using javascript:

window.location.href = '#label2';

If you need to do it from the server/code behind, you can just emit this Javascript and register it as a startup script for that page.

Method 3

Moving to a anchor from server side, example is c#.

ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);

Method 4

I suppose this will work:

window.location="<yourCurrentUri>#label2";

Method 5

The solution

document.getElementById('MyID').scrollIntoView(true);

works well in almost all browsers, whereas I’ve noticed that in some browsers or in some mobile (such as some Blackberry versions) “scrollIntoView” function is not recognized, so I would consider this solution (a bit uglier than the previous one):
window.location.href = window.location.protocol + "//" + window.location.host + 
                       window.location.pathname + window.location.search + 
                       "#MyAnchor";

Method 6

If the element is an anchor tag, you should be able to do:

document.getElementsByName('label2')[0].focus();

Method 7

no “#” when you use window.location.hash

Method 8

you can just open the new URL with the name appended, for instance http://www.example.com/mypage.htm#label2

In JavaScript,

location.href = location.href + '#label2';


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x