a-anchor锚点跳转后距离顶部设置距离-使用css设置锚点与页面顶部保持一定距离

星月前端

已于 2023-03-29 09:21:59 修改

阅读量770

点赞数 1

文章标签： css 前端 javascript

于 2023-03-29 09:19:30 首次发布

本文链接：https://blog.csdn.net/qq_61950936/article/details/129829846

版权

文章介绍了如何通过CSS的scroll-padding-top属性来控制锚点跳转后在页面中的位置，确保它与顶部保持一定的距离，从而提供更好的用户体验。这种方法特别适用于存在滚动条的容器中，当组件提供的设置无法生效时，可以直接在CSS样式中进行定制。

摘要由CSDN通过智能技术生成

a-anchor锚点跳转后距离顶部设置距离-使用css设置锚点与页面顶部保持一定距离

组件提供的设置不会生效，具体原因不清楚，这里自己控制滚动条的css距离。简单解决。
在这里插入图片描述

/**
   * 设置锚点滚动后距离顶部的距离
   * 在产生滚动条的容器中设置css样式，如下：
   * @param scroll-padding-top: 100px; // 锚点跳转后距离顶部的距离
   */
  //   .pount-con {
  //   height: 100vh;
  //   overflow-y: scroll;
  //   scroll-padding-top: 100px; // 锚点跳转后距离顶部的距离
  // }