one

3,962 1 1 gold . Jump to different sections of the page when theres a fixed navbar, Change on screen location after hyperlink is clicked, Bootstrap Nav making named links scroll under navigation bar, submit button scroll to div and a bit more, In Bootstrap how do I have fixed header and have, Make a div fill the height of the remaining screen space, How to align content of a div to the bottom. SOLUTION 1: You could use CSS without any javascript. Find centralized, trusted content and collaborate around the technologies you use most. height and negative margin should match right? Here's a JSFiddle demonstrating this in action. Adjust fixedElementHeight for the height of your menu or blocking element. Change the . Why do you have visibility hidden added to the target element? 511. I don't fully understand why this works, but +1 from me. Thanks and good luck. First of all you need to know the height of your header. I'm facing this problem in a TYPO3 website, where all "Content Elements" are wrapped with something like: and i changed the rendering so it renders like this: The fixed topbar being 40px high, now the anchors work again and start 10px under the topbar. Change the top value to match the height of your fixed header (or more).Now I assume this would work with other elements as well. e.preventDefault(); } Add the js-scroll class to the anchor that should scroll on click. When you do things the HTML5 way (and I think 4 too) where you target an id attribute within a node such as section or header, this way caused the element to display overlapping elements above it. When i open my page with an anchor in the url, it moves to where the anchor is but it won't offset it. a[name] selector should not be affected to links, These two CSS solutions didn't work for me on the first sight, but finally I found out it, [Solved] This solution works and i used this solution with, If you decide to use this method, it is probably a good idea to add, This solution messes up collapsed margins by disconnecting them. Connect and share knowledge within a single location that is structured and easy to search. }, a.wikitechy { None of the others were as easy to implement or worked as well as this. This simply looks for links with a name and no href e.g. offsetting an html anchor to adjust for fixed header [duplicate] - Reddit 1 possible duplicate of offsetting an html anchor to adjust for fixed header Since you are clicking a <a> tag you are going to be modifying the url. The best fix I found was to place section content in a div that is at z-index: 1: Solutions with changing position property are not always possible (it can destroy layout) therefore I suggest this: to minimize overlapping, and set font-size to 1px. Robust, user-friendly data protection for your visitors and you. Is a downhill scooter lighter than a downhill MTB with same performance? What characters can be used for up/down triangle (arrow without stem) for display in HTML? The other two cause the