Menu
When clicking on an anchor link, it cuts off a portion of the page. Near as I can tell it occurs in all browsers.
http://jsfiddle.net/PJDWs/
If you go to that fiddle and click on the link at the top, you will notice that you are unable to scroll up to the top of the page. Effectively part of the page has been removed.
There are a couple things that cause it, but I don't know why they do. If you remove overflow: hidden from the .bodyContent then it does not exhibit this behavior. Also, you will notice that the distance of the cut off is exactly equal to the value of top: XXpx on .stuff. Thus setting top: 0px will fix the problem as well.
The issue is that for the specific design I'm working on, neither of these are options as the element needs to be positioned off the top and the parent needs overflow hidden. But more importantly, why is this occurring, and especially why does it occur across all browsers... it almost seems like it's by design.
620
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.
The hypertext reference, or href , attribute is used to specify a target or destination for the anchor element. It is most commonly used to define a URL where the anchor element should link to. In this example, the <a href="http://example.com">anchored text</a> links to the URL <em>www.example.com</em>.
If you remove the height:100%; and replace it with bottom:0; it will work because the height, with top and bottom set, is then defined by the enclosing container - it's an interesting bug but this workaround will get the job done.
125
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
