# Scroll to Section

Scrolling scenarios

* Specific pages, often the homepage hav sections that we want to directly scroll to in the global nav
* All pages have

Solutions;

* Must handle direct navigation\
  e.g. `https://www.mysite.com/#contact` 
* Must handle top-nav navigation from that page's nav bar

Ideally, 

*
* Should work perfectly on both staging and production, e.g. the origin does not need to be part of the URL
* We do not want to have to handle in-page scrolling v. cross-page scrolling separately  
* CMS-link compatible 
* Keep the current state nav depending on the section you're on 

Offset;

* Support offsetting the scroll position for a fixed nav
* Support sticky navs as well
* Auto-calculate ( like Webflow does ) or allow a manual specification, stored on the body element 

Options;

* Hide the `#hash` 
* Delay re-scroll, used for lazy-load 
* Just remove lazy-load  ( bandwidth impacts ) 
*

## Usage Notes

* Avoid using the scroll-to-section option in links
* Instead, form your links as relative links

Specific page

e.g. `/#contact` 

e.g. `/about/#contact`

{% hint style="info" %}
ID's are case-sensitive
{% endhint %}

Current page

e.g. a section that you have on all pages, such as a Contact Us block that is part of your page footer. 

e.g. `#contact` 

Note the absence of the forward slash `/`, which is the homepage path.  Here we avoid adding a path that since we want to stay on the current page. 

Link from another site

e.g. `https://www.mysite.com/#contact` 

This will also work, and smooth-scroll 

{% hint style="info" %}
Will these work in the CMS? 
{% endhint %}

## Technical Notes

```
function scrollToElementWithOffset() {
    console.log('scrollToElementWithOffset triggered');

    // Suppress the automatic hash scrolling behavior on page load
    if (window.location.hash) {
        // Temporarily remove the hash to prevent default jumping
        const originalHash = window.location.hash;
        history.replaceState(null, null, ' '); // Temporarily remove the hash
        console.log('Suppressed initial hash:', originalHash);

        setTimeout(() => {
            // Check if there's a fixed-position element at the top of the body
            const fixedElement = document.querySelector('body > *');
            console.log('First element in body:', fixedElement);

            let offset = 0;
            if (fixedElement) {
                const computedStyle = window.getComputedStyle(fixedElement);
                console.log('Computed style of first element:', computedStyle.position);

                if (computedStyle.position === 'fixed') {
                    offset = fixedElement.offsetHeight;
                    console.log('Fixed element detected with height:', offset);
                } else {
                    console.log('First element is not fixed position');
                }
            } else {
                console.log('No elements found in body');
            }

            // Restore the hash
            history.replaceState(null, null, originalHash);
            console.log('Restored the original hash:', originalHash);

            // Now scroll to the target element with the correct offset
            const element = document.querySelector(originalHash);
            console.log('Target element for hash:', element);

            if (element) {
                // Calculate the target scroll position
                const elementPosition = element.getBoundingClientRect().top + window.scrollY;
                const offsetPosition = elementPosition - offset;
                console.log('Element position:', elementPosition);
                console.log('Offset position:', offsetPosition);

                // Scroll to the position with the offset
                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
                console.log('Scrolling to position with offset');
            } else {
                console.log('No element found for the hash:', originalHash);
            }
        }, 0); // Run after the current event loop to ensure the DOM is ready
    } else {
        console.log('No hash in the URL');
    }
}

// Run the function on page load and on hashchange
window.addEventListener('load', scrollToElementWithOffset);
window.addEventListener('hashchange', scrollToElementWithOffset);

```


---

# 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://attr.sygnal.com/sa5-html/scroll-to-section.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.