Navigation / In Page

Description of component:

This component is based on the Link / Skip Content component.

Component Example

About

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.

Team

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.

Contact

Code Snippets

HTML

                
                    <a class="js--skip-content" href="#main-content">Skip to main content</a>

CSS

                
                    /* Note: 
                    * The below #id-placement is for example, you can add whatever .is-focused glass to any id you are targetting
                    ============================================= */
                    
                    #id-placement {
                        &.is-focused {
                            box-shadow: 0 0 0 1px blue;
                        }
                    }

JS

                
                    const skipContent = document.querySelectorAll('.js--skip-content');
                    var i;
                    
                    for( i = 0; i < skipContent.length; i++ ) {
                        
                        skipContent[i].addEventListener('click', function(e){
                            e.preventDefault();
                            var skipContentTargetId = e.currentTarget.getAttribute('href');
                            skipContentTargetId = skipContentTargetId.replace(/\#/g,'');
                            var skipContentTarget = document.getElementById(skipContentTargetId);
                            var skipContentTargetOffSet = skipContentTarget.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: skipContentTargetOffSet,
                                    behavior: "auto"
                                });
                            } else {
                                scroll({
                                    top: skipContentTargetOffSet,
                                    behavior: "smooth"
                                });
                            }
                            
                            skipContentTarget.focus();
                            skipContentTarget.classList.add('is-focused');
                            
                            setTimeout( function(){
                                skipContentTarget.classList.remove('is-focused');
                            }, 1000 );
                        });
                    }