Reliably jumping to named anchor on dynamically generated page?

I have a web page which is dynamically built by the client. It generates dozens of list items each with its own named anchor. The side of the page has a fixed table of contents (TOC) with hyperlinks that point to the named anchors. This allows the user to click a TOC entry a jump to the item.

The trouble I am encountering is that on the initial page load the page is dynamically generated and so it cannot scroll to the item in the initial hash of the URL using the default behavior of a browser. Additionally, when the user switches to a different book the page is completely regenerated with new content and a new starting hash. Same problem: since the hash preexists the content, it doesn't situate itself with the item already in view.

I nearly solved this with JavaScript by awaiting the rendering and then jumping to the hash using scrollIntoView method on the appropriate element.

The next problem is that the stylesheet is not fully applied by the time scrollIntoView is called and so the final position of the item is unknown. I see the unstyled item scroll into view, but once styling is applied the positioning is lost. I put a 1 second setTimeout in place to delay the scrollIntoView call. This works but feels fragile.

Are there reliable techniques for jumping to a named anchor when the content comes after the hash is in place? If I knew when the CSS was done styling content that might help. Alternately, it might be useful to trigger an event once the height of the page stabilizes (thus signaling the finalization of CSS styling).

Answers


I had a similar problem, although in my case only the table of contents and named anchors were autogenerated in the onload handler - not the rest of the page content. I solved the initial hash problem by adding the following code to my onload handler after generating the anchors:

if (location.hash)
{
    var requested_hash = location.hash.slice(1);
    location.hash = '';
    location.hash = requested_hash;
}

I had to set the hash to '' before setting it back to the requested name to make the browser respond. This seemed to work in all the browsers I tried (Opera, Chrome, Edge, IE, FF).


You can use jQuery if you will always know the name of the element you want to set focus to. You can run this after your page has loaded:

$( "#targetElementGoesHere" ).focus();

Edit: To scroll to that, check out https://github.com/flesler/jquery.scrollTo


I think the answer you require was answered by this guy...

How to wait until a web page is loaded with javascript?

So, something like this...

document.onload = function(){ 
    scrollIntoView...
}

Need Your Help

developing a native mobile app for blackberry os5 +

java blackberry

I am coming from PHP and have a tiny understanding of Java, though am still learning it. I want to develop an app for blackberry which will work with os' 5,6,7 . What the steps to take to do this, ...

PHP proc_open bash vs dash

php linux proc-open

Consider this sample script: