# How to jump/ link to another section on the SAME page

Linking to another part of a website on the same page is often referred to as creating an "anchor link" or "in-page link." This is a hyperlink that directs you to a specific section within the same webpage, rather than to a different page or an external site.

This technique is useful for long pages with multiple sections, like FAQs, terms and conditions, or detailed articles, allowing users to navigate directly to the information they are interested in.

Here's how it works:

{% embed url="<https://youtu.be/AqUaxpf0TvQ>" %}

* **Link anchor id**: Fill out the setting named "Link anchor id" with a unique name (no spaces and only use dashes) Add a # symbol at the beginning. eg. #new-releases We've found it works best to avoid capital letters, don't start with a number and use dashes to separate words

  <figure><img src="/files/jGMuZOB1WqKYGodRFkbH" alt=""><figcaption><p>Helpful hint! Not seeing this setting in the section under "Advanced"? Re-install your section from the Design Packs app and it will appear. Contact at us at support@design-packs.com if you still can't find it. :)</p></figcaption></figure>
* This `Link anchor id`  acts as a marker that you can link to.

#### 2. **Linking to the Anchor**:

* To create a link that jumps to this specific section, use the "Link" setting in any other section. You can use the richtext editor links or button links. Anywhere that you would normally link to another page. For example:

  <figure><img src="/files/2NITM3lAHJAOdcEYyloA" alt=""><figcaption><p>Make sure to include the # at the beginning of your anchor id</p></figcaption></figure>

{% embed url="<https://share.zight.com/xQu5elR1>" %}

#### 3. **User Interaction**:

* When a user clicks on the link, the browser automatically scrolls to the part of the page with the matching `Link anchor id`.

{% embed url="<https://share.zight.com/6qun7RGY>" %}

#### 4. Adding Smooth Scrolling with CSS

To enable smooth scrolling for anchor links on your webpage, you can use CSS.&#x20;

You can enable smooth scrolling by adding the following CSS to your stylesheet or custom global CSS (must be global, this will not work in section scoped CSS fields) You can also use our "CSS Styles" section.

```css
html {
  scroll-behavior: smooth;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-jump-link-to-another-section-on-the-same-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.