> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/global-sections/header-and-navigation/anchor-link.md).
# Anchor Link
Create invisible scroll targets for smooth in-page navigation using anchor links with custom fragment IDs.
An invisible utility section that creates a named scroll target on the page. Use it to build "jump to" links that smoothly scroll visitors to a specific part of the page.
In the Theme Editor this section is listed as **Anchor link**. It has one field and no blocks, and it works on any page template — but not inside the header or footer areas.
***
### How to find
**Theme Editor → Add section → Anchor link**
The section is invisible on the storefront — it only serves as a target for links.
***
### How it works
{% stepper %}
{% step %}
Add the **Anchor Link** section to your page and place it above the section you want to link to
{% endstep %}
{% step %}
Set the **Anchor link** field to a name — for example, `details`
{% endstep %}
{% step %}
In any button or link on the page, use `#details` as the URL
{% endstep %}
{% endstepper %}
When a visitor clicks that link, the page scrolls smoothly to the anchor position.
{% hint style="success" icon="sparkles" %}
### Good to know
* **Rename every anchor you add.** The field ships with a default value of `anchor-link`, so two sections left untouched give the page two identical IDs — and the browser only ever scrolls to the first one. This is the usual reason an anchor that used to work stops working after a second one is added.
* **The name has to match the link exactly, capitalization included.** If the section says `details`, the link is `#details` — not `#Details`. Type the name without the `#`; the hash belongs in the link only. Use hyphens instead of spaces.
* **You will see the section in the Theme Editor — that's intentional.** Avante draws a tinted placeholder strip with an icon, the label *Anchor link: #your-name*, and the note *"This section is invisible outside theme customization"*, so that the section stays selectable. On the live storefront it renders nothing and takes up no height.
* **Smooth scroll is a four-way setting, not a switch.** In [Theme settings → Animation](/docs/avante-themes/theme-settings/animation.md), **Enable anchor links smooth scroll** offers *Disable*, *on desktop*, *on mobile* and *both* — with *both* as the default. So if the jump glides on desktop but snaps on a phone, the setting is on *on desktop* and nothing is broken.
{% endhint %}
***
### Use cases
**One-page store** — create a single homepage with multiple sections and a top menu that jumps between them (About, Products, Contact).
**Long product pages** — add anchor links above tabs or review sections so you can link directly to "Read reviews" or "Size guide" from the product description.
**Promotional landing pages** — link a hero banner CTA to a featured collection further down the same page.
***
### Related
* [Animation](/docs/avante-themes/theme-settings/animation.md) — smooth scroll and the rest of the global motion settings
* [Appearance](/docs/avante-themes/theme-settings/appearance.md) — navigation layout options
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/avante-themes/global-sections/header-and-navigation/anchor-link.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg?alt=media&token=9529aa27-4c0d-4357-9ecb-c165a08af0b5)
.jpg?alt=media&token=b387654c-67a8-4e34-904b-3f385668a527)