Find your content:

Search form

You are here

VisualForce Anchor Link

 
Share

What is the best way to implement an HTML anchor in VisualForce?

I would like to automatically scroll down to a specific section upon load of the page.

Ideally by going to something like

https://c.cs17.visual.force.com/apex/CP_MyAccount#documentsSection

It should automatically scroll down to the part where it has the anchor name of "documentsSection"

I've already tried both of these but no luck so far:

<a id="documentsSection" name="documentsSection">Documents</a>

<a name="documentsSection">Documents</a>

Any ideas?


Attribution to: Joey Chan

Possible Suggestion/Solution #1

If the anchor passed through URL is dynamic, the traditional way to pass anchor via hash might not work.

One workaround is to pass the anchor via parameter, and on page load, use javascript to scroll into the correct view.

Javascript:

jQuery(window).load(function() {
    document.getElementById('{!$CurrentPage.parameters.myId}').scrollIntoView();
}

Element to be displayed:

<a id="{!myId}"></a>

Attribution to: Mingyu

Possible Suggestion/Solution #2

If this is not natively supported in Visualforce, you could work around with javascript as illustrated here.

i.e. invoke a javascript function on load which sets window.location.hash to the anchor element grabbed from the URL.

Here is another related post.


Attribution to: techtrekker

Possible Suggestion/Solution #3

I found the answer! It works just fine when not in development mode.

https://c.cs17.visual.force.com/apex/CP_MyAccount?core.apexpages.devmode.url=1#documentsSection

For some reason I guess there are problems with the footer for the code but this solution now works for me!


Attribution to: Joey Chan
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/5260

My Block Status

My Block Content