a标签锚点定位被顶部固定导航栏遮住的解决方案(ios和android兼容性避坑)

滚动元素设置 scroll-padding-top

<style>
html {
    scroll-padding-top: 60px;  /* 控制a标签锚点距离顶部距离 */
    scroll-behavior: smooth; /* 平滑滚动 */
}
</style>

scroll-padding-top在ios(iphone12、iphone13)设置不生效！！或有兼容性问题。
​

解决方案：使用:target伪类

#acne:target,
#blackhead:target,
#darkcircle:target,
#pore:target,
#coarseness:target {
    padding-top: 50px; /* 50px为导航栏高度 */
    margin-top: -50px;
}

兼容性如下

​

 

参考资料

锚点定位被顶部固定导航栏遮住的解决方案_秦一scar的博客-优快云博客