close

轉自 https://www.itsupportguides.com/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

--

How to offset anchor tag link using CSS – NO JAVASCRIPT required

If your website has a fixed header you may have noticed that anchor tag links don’t work perfectly. When a user clicks on the anchor tag link the location of the anchor becomes hidden behind the fixed header, hiding the first part of the content.

To fix this you can add the following to your CSS style sheet.

This method does not involve any JavaScript, or classes manually added to each anchor.

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Note: 90px is the height of the fixed header plus margin and padding. You will need to adjust this to the size of your fixed header.

Before:

After:

Reference: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors

--

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 dizzy03 的頭像
    dizzy03

    碎碎念

    dizzy03 發表在 痞客邦 留言(0) 人氣()