Anchor links with browser repainting

Question

I'm building a website with one of those long home pages with different sections. I'm trying to use anchor tags on the home page, so that when you link to it from other pages, you go straight to the right section.

It initially goes to the right section, but then when images and facebook and pinterest plugins load, they push the content down.

I read that you can avoid this by declaring image dimensions inline. Except that my site is responsive so the images need to be fluid. Is there a way around this?

If this is impossible, a javascript solution would be acceptable as well. Right now the home page menu uses jquery to scroll to the right section. Is there a way to send a visitor to the home page, wait for it to load, and then use the same script to scroll to a section?

EDIT: I found an answer, kind of. I went by the following answer: https://stackoverflow.com/a/9805747/1948221

But that script jumps before my social plugins have loaded, causing the same problem I described originally. If I add some timeout to the setTimeout function, the page has time to load completely and everything works perfectly. Only problem is loading times vary a lot so it's impossible to get it right every time.

Any help?

Answer 1

I wouldn't recommend you a solution without using javascript. Since you have tagged your answer with jQuery , I think you will be happy with this smooth example .

You can find its explenation over here .

Update#1

I read that you can avoid this by declaring image dimensions inline. Except that my site is responsive so the images need to be fluid. Is there a way around this?

I would say you would take the best way if you declare the image dimensions inline.
Use a javascript library to react on responsive design. I think this would be an acceptable workaround.

Maybe you are interested in using Device.js ( Github / Demo ) in order to react to the different devices.