Word Count: 113
  • Post category:Codings
  • Post last modified:2022-06-23

Propose

To have more control on the scrolling to an anchor point (<a> tag) on the page, it is possible to use CSS only without the needs of using JS.

Add the following HTML, or similar, at the position of the anchor. For elementor, use the HTML widget.

<a class='cu-anchor-1' id='cu-id'></a>

Give the <a> tag a class (e.g., “cu-anchor-1”) and apply the following CSS.

a.cu-anchor-1 {
    display: block;
    position: relative;
    top: -250px; /* positions the anchor up by 250px */
    visibility: hidden;
}

Try Me

Click me to go to 156px above the “Purpose” paragraph.