Do you know how to use css anchors?

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

(Recommended tutorial: CSS tutorial)

<a href=&#39;#one&#39;>到达第一个锚点</a>
    <a href=&#39;#two&#39;>到达第二个锚点</a>
    <div id=&#39;one&#39;>我是第一个锚点</div>
    <div id=&#39;two&#39;>我是第一个锚点</div>

So when we click on link A, the corresponding 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>
    <div id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第一个需要滚动的内容</div>
   <div id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
    <div >我是第二个需要滚动的内容</div>

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

The above is the detailed content of Do you know how to use css anchors?. For more information, please follow other related articles on the PHP Chinese website!