Menu
My page http://dl.dropbox.com/u/49912546/anchor_link_test.htm displays differently when an anchor is used too http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - content below an image is moved up slightly
This happens consistently across browsers, so there must be something in the spec that means this is the correct behaviour... but what? It only happens when an image is loaded (if the src is invalid the bug doesn't happen).
*edit By the way, I found a workaround already http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, so I'm not looking for bug fix - I just want to know why all browsers have CSS implementations that cause this behaviour.
937
You could add the scroll-padding-top CSS property to an HTML element with a value of 4rem . Now when you click the anchor link, the browser jumps to the anchor section but leaves padding of 4rem at the top, rather than scrolling the anchor point all the way to the top.
To link to your newly-created named anchor, highlight the text, then click the Linkit button. In the "Link URL" field, add a "#" symbol and your anchor name: Click "Insert link" to add the link to your named anchor (on the same page).
The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag <link> defines a link between a document and an external resource and these are not clickable.
Sub-headings make pages easier to scan, everybody knows that. Not everybody knows that on some long pages, anchor links or jump links are even better. During user tests, the response to anchor links is always positive. People like anchor links because they give them a good overview of the content of a page.
half content appears to shift upwards because the .panel
its contained within is set to overflow:hidden & has content that is being clipped as a result.
When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.
For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
