应用场景
网站有个悬浮顶栏，希望锚点定位的元素会向下偏移一段距离（默认情况下，锚点定位时，页面会向下滚动，直到锚点定位的元素会出现在浏览器顶部）
实现原理
利用给内联元素添加padding不影响布局的特征，给锚点添加 padding-top 来实现偏移
完整范例代码
访问 http://localhost:8080/test#anchor 时，定位到 id 为 anchor 的元素
<template> <div> <div class="topBanner">我是网站的悬浮顶栏</div> <div style="padding-top: 50px"> <p v-for="(item,index) in 100" :key="index">你好{{item}}</p> <span class="anchor" id="anchor">我是锚点！</span> <p v-for="(item,index) in 100" :key="index">你好{{item}}</p> </div> </div> </template> <style scoped> .anchor { padding-top: 56px; color: red; } .topBanner { position: fixed; height: 50px; background: red; width: 100%; top: 0px; } </style>
