Swegon Component Library

Skip Link 

<nav class="skip-link">
    <div class="skip-link__inner">
        <a class="link skip-link__anchor" href="#main">
            <span class="skip-link__label">Go to main content</span>
        </a>
    </div>
</nav>
 
<nav class="skip-link">
    <div class="skip-link__inner">
        <a class="link skip-link__anchor" href="#main">
            <span class="skip-link__label">Go to main content</span>
        </a>
    </div>
</nav>
 
/* No context defined. */
  • Content: 
    function initSkipLink(container) {
    const anchor = container.querySelector('.skip-link__anchor');
    if (!anchor) return;

    const handleScroll = () => {
        const containerRect = container.getBoundingClientRect();
        const scrollLimit = container.offsetHeight / 2;

        if (containerRect.bottom < scrollLimit) {
            container.classList.remove('is-active');
            window.removeEventListener('scroll', handleScroll);
        }
    };

    anchor.addEventListener('focus', () => {
        container.classList.add('is-active');
        window.addEventListener('scroll', handleScroll);
    });

    anchor.addEventListener('blur', () => {
        container.classList.remove('is-active');
        window.removeEventListener('scroll', handleScroll);
    });
}

document.querySelectorAll('.skip-link').forEach(initSkipLink);
  • URL: /components/raw/skip-link/index.js
  • Filesystem Path: src/components/skip-link/index.js
  • Size: 851 Bytes
  • Content: 
    .skip-link {
    overflow: hidden;
    height: 0;
    transform: translateY(-100%);
    transition: transform 0.25s ease, height 0.25s ease;
    text-align: center;

    &.is-active {
        height: 80px;
        transform: translateY(0);
    }
}

.skip-link__inner {
    background-color: $color-green-dark;
    padding: size(2);
}

.skip-link__anchor {
    color: $color-white;
    display: inline-block;
    text-decoration: none;
    padding: size(1);
}
  • URL: /components/raw/skip-link/skip-link.scss
  • Filesystem Path: src/components/skip-link/skip-link.scss
  • Size: 459 Bytes

No notes defined.