Detailed explanation of the use of CSS anchor points (newbies)

There are two ways to use CSS anchors. I recommend using the following:

  <a href=&#39;#one&#39;>到达第一个锚点</a>

    <a href=&#39;#two&#39;>到达第二个锚点</a>

    <p id=&#39;one&#39;>我是第一个锚点</p>

    <p id=&#39;two&#39;>我是第一个锚点</p>

In this way, when we click on the A link, the corresponding The DOM node will scroll to the top of the window.

But sometimes our need is not to let it scroll to the top of the window. You may want him to be some distance from the top. This can be solved by the following methods.

  <a href=&#39;#one&#39;>到达第一个锚点</a>

    <a href=&#39;#two&#39;>到达第二个锚点</a>

    <p id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>

 <p >我是第一个需要滚动的内容</p>

   <p id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>

    <p >我是第二个需要滚动的内容</p>

This will achieve the effect of 200px from the top after scrolling. Without affecting the style of the original page

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/baidu_32519511/article/details/52668834

Recommended tutorial: "CSS Tutorial" https://www.php.cn/css -tutorial.html

The above is the detailed content of Detailed explanation of the use of CSS anchor points (newbies). For more information, please follow other related articles on the PHP Chinese website!