Programmatically scroll to an Anchor Tag
-
06-07-2019 - |
Question
Consider the following code:
<a href="#label2">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.
Solution
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.
OTHER TIPS
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.
Moving to a anchor from server side, example is c#.
ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);
I suppose this will work:
window.location="<yourCurrentUri>#label2";
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";
If the element is an anchor tag, you should be able to do:
document.getElementsByName('label2')[0].focus();
no "#" when you use window.location.hash
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';