}, make anchor link go some pixels above where it's linked to. It can be defined using one to four values. Thanks for posting this. I have a header that is fixed to the top of the page, so when you link to an anchor elsewhere in the page, the page jumps so the anchor is at the top of the page, leaving the content behind the fixed header (I hope that makes sense). This question already has answers here: Fixed page header overlaps in-page anchors (37 answers) Closed 6 years ago.I am trying to clean up the way my anchors work. I additionally had to use :target pseudo-class which applies style to the selected anchor to adjust padding in FF, Opera & IE9: Note that this style is not for Chrome / Safari so you'll probably have to use css-hacks, conditional comments etc. Adjust the headerHeight variable to whatever your header height is. html - How to scroll to an anchor with an offset? - Stack Overflow I like this solution, very modular and beautifully done. scrollIfAnchor: function(href, pushToHistory) { })(window.document, window.history, window.location); *[id]:before { I am trying to clean up the way my anchors work. ,
-
Does this need to load in the head section? (http://davidwalsh.name/persistent-header-opacity). offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position. edit:: my nav items link to h2 elements, which are all display: block. The three are then given different background-color and offset-anchor values. One last note before I get into it I am assuming that you use the id rather than name attribute for your anchors. When I use jump links the anchor is at the top of the page which is no good as it sits behind the fixed header. In this post, Ive done so within the opening tags of the h2s above. Note: -250px will be position an anchor up to 250px. /**
I don't fully understand why this works, but +1 from me. How offsetting an html anchor to adjust for fixed header ?