I have looked at other posts for this issue but alass none have worked so here i am.
Im trying to make my header(position is fixed) link to a page anchor but when i press the link it goes past the top of the div and the header for it. So to see the entire div including header then you need to scroll up.
I have got a Fiddle of it here
.wrapper {
width: 100%;
height: 1000px;
margin: 130px auto;
padding: 0;
background-color: aliceblue;}
You can just use CSS. Just make standalone hidden anchor elements and clip them the height of your header.
Here is the anchor class I used:
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
height:0px;
}
JSFiddle (I only did the first few links): http://jsfiddle.net/pp9dg/29/
Here's an updated fiddle: http://jsfiddle.net/pp9dg/28/
It uses jquery which offsets the anchor point by 200px.
$(window).on("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 200);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.