Links / Title Anchors

Description of component:

ClickUp Ticket

How to use this component

This component is boiled down to the class js--anchor-title. Any heading element (H1-H6) with this class will Automatically have an anchor prepended. IDs need to be added manually

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sem laoreet, pulvinar justo vel, pulvinar mauris. Cras ut lorem vel arcu scelerisque viverra a eget magna. Vivamus ac eleifend nulla. Sed convallis magna molestie ullamcorper viverra. Maecenas sit amet erat eget dolor pellentesque maximus eu quis lorem.

Fusce ac eros sit amet ligula tristique hendrerit nec ac nisi. Morbi ullamcorper, enim id iaculis finibus, purus arcu iaculis diam, eu suscipit orci lacus nec enim. Pellentesque sodales dui ut lorem molestie fringilla. Donec sit amet condimentum libero.

Sed turpis orci

In volutpat convallis mauris, dictum gravida nibh volutpat nec. Proin lorem arcu, dapibus sit amet auctor eget, tincidunt eget tellus. Suspendisse euismod felis et hendrerit faucibus. Mauris efficitur dui ut enim efficitur, eu faucibus nunc venenatis. Proin sed enim libero.

In volutpat convallis mauris, dictum gravida nibh volutpat nec. Proin lorem arcu, dapibus sit amet auctor eget, tincidunt eget tellus. Suspendisse euismod felis et hendrerit faucibus. Mauris efficitur dui ut enim efficitur, eu faucibus nunc venenatis. Proin sed enim libero.

Code Snippets

HTML

                
<h2 class="js--anchor-title anchor-title" id="working-example">Working Example</h2>
                
            

CSS

                
.anchor-title {
    position: relative;
    
    &.focus {
        box-shadow: 0 0 0 1px blue;
    }
}

.anchor-title__link {
    position: absolute;
    left: -1rem;
    
    &::before {
        content: "§";
        display: inline-block;
        font-size: clamp(13px, 83%, 22px);
        transform: translateY(-12%);
    }
}
                
            

JS

                
// get all anchor titles
const titleAnchors = document.querySelectorAll('.js--anchor-title');
var i;

// for each anchor titles prepend an anchor
for( i = 0; i < titleAnchors.length; i++ ) {
    var titleId = titleAnchors[i].getAttribute('id');


    var newAnchor = document.createElement('a');
    newAnchor.setAttribute('href','#' + titleId);
    newAnchor.setAttribute('class','js--anchor-title__link anchor-title__link');
    newAnchor.setAttribute('aria-label','§');

    titleAnchors[i].prepend(newAnchor);
}

// get all anchor title links
const titleAnchorsLinks = document.querySelectorAll('.js--anchor-title__link');

// for each anchor title link on click scroll to link and highlight title section visually
for( i = 0; i < titleAnchorsLinks.length; i++ ) {
    titleAnchorsLinks[i].addEventListener('click', function(e){
        var anchorTitle = e.currentTarget.parentNode;
        var anchorTitleOffSet = anchorTitle.offsetTop - 50;
    
        // check if the body has the animations-paused class to either smooth scroll or straight jump
        if( document.body.classList.contains('animations-paused') ) {
            scroll({
                top: anchorTitleOffSet,
                behavior: "auto"
            });
        } else {
            scroll({
                top: anchorTitleOffSet,
                behavior: "smooth"
            });
        }

        anchorTitle.classList.add('focus');

        setTimeout( function(){
            anchorTitle.classList.remove('focus');
        }, 1000 );
    });
}
                
            

Credits

This component was based on the code used on https://www.w3.org/TR/WCAG22/ as their own section anchors.