css实用技巧——给锚点定位添加偏移

应用场景

网站有个悬浮顶栏，希望锚点定位的元素会向下偏移一段距离（默认情况下，锚点定位时，页面会向下滚动，直到锚点定位的元素会出现在浏览器顶部）

实现原理

利用给内联元素添加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>