Menu
I'm using a static bar at the top of my site, about 20px high. When I click an anchor link(for those who don't know, the navigation on wikipedia works like that. Click a title and the browser goes down to it) part of the text disappears behind that top bar.
Is there any way to stop this from happening? I'm not in a position where I can use an iFrame. Onlything I can think of is make it scroll back a bit each time, but is there another way? Some CSS setting to manipulate the body or something?
941
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 achieve a smooth scrolling effect for anchor links, add a scroll modifier—block T178 from the "Other" category to the bottom of your page. Now, when you click an anchor link, the transition will be smoothly animated.
The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts. Scroll anchoring behavior is enabled by default in any browser that supports it.
You have to give your anchor a the rule display: block; . Anchors are inline elements per default. If you give an element position: absolute , you take it out of so-called normal document flow.
You could just use CSS without any javascript.
Give your anchor a class:
<a class="anchor"></a> You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;} By Jan see offsetting an html anchor to adjust for fixed header
162
scroll-margin-top: 20px; It does exactly what it sounds like: acts as if there is a margin, but only when in the context of scrolling. So scroll-margin-top: 20px; on an element means that clicking an anchor tag for that element will scroll the page to 20px above the element.
No support for IE. Also, Safari versions 11-14 use a non-standard name: scroll-snap-margin-top (but otherwise works as expected). Safari 14.1+ works with the standard name.
nav{ position: fixed; top:0; left:0; background: black; color: white; width: 100%; } #after-nav{ margin-top: 25px; } #section-1{ width: 100%; background: green; height: 500px; scroll-margin-top: 20px; } #section-2{ width: 100%; background: blue; height: 500px; scroll-margin-top: 20px; } ul{ margin-top: 0; }<nav> Nav bar: 20px (as in OP) </nav> <div id="after-nav"> Table of contents: <ul> <li><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> </ul> <div id="section-1">Section 1</div> <div id="section-2">Section 2</div> </div>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
