Links / Back to Top

Description of component:

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

How to use this 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.

History

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.

Team

Contact

Code Snippets

HTML

                
                    <a class="js--skip-content" id="back-to-top-btn" href="#top-section" aria-label="Back to top"><span aria-hidden="true"></span></a>

CSS

                
                    #back-to-top-btn {
                        position: fixed;
                        bottom: 1rem;
                        right: 1rem;
                        background: violet;
                        width: 3rem;
                        height: 3rem;
                        display: none;
                        
                        >span {
                            
                            &::before, &::after {
                                content: '';
                                display: block;
                                width: 50%;
                                height: 5px;
                                background: black;
                            }
                            
                            &::before {
                                position: absolute;
                                top: 50%;
                                left: 5px;
                                transform: translateY(-50%) rotate(-45deg);
                            }
                            
                            &::after {
                                position: absolute;
                                top: 50%;
                                right: 5px;
                                transform: translateY(-50%) rotate(45deg);
                            }
                        }
                    }

JS

                
                    /* collect const/vars
                    ============================================= */
                    const backToTopBtn = document.getElementById('back-to-top-btn');
                    var backToTopTargetId = backToTopBtn.getAttribute('href');
                    backToTopTargetId = backToTopTargetId.replace(/\#/g,'');
                    const backToTopEle = document.getElementById(backToTopTargetId);
                    
                    
                    /* topEleLocation()
                    * this function gets the position of the targetting elements in the back-to-top link
                    * if this targeted element's top is past the top of the screen it will trigger the back-to-top link to display.
                    ============================================= */
                    function topEleLocation(backToTopEle) {
                        var currentTopEleLocation = backToTopEle.getBoundingClientRect().top - 50;
                        
                        if( currentTopEleLocation < 0 ) {
                            backToTopBtn.style.display = 'block';
                        } else {
                            backToTopBtn.style.display = 'none';
                        }
                    }
                    
                    
                    /* Additional Script:
                    * The topEleLocation(backToTopEle) function needs to be called within the scroll event listener.
                    * The scroll event listener calls different functions and is saved under /src/scripts/globals/scroll.js
                    * For this example it only displays the topEleLocation() function within it.
                    ============================================= */
                    var scrollThrottle;
                    var previousScroll = 0;
                    
                    document.addEventListener('scroll', function() {
                        if (!scrollThrottle) {
                            scrollThrottle = setTimeout(function () { 
                                
                                // * call on page scroll functions
                                topEleLocation(backToTopEle);
                                
                                // * reset scrollThrottle
                                scrollThrottle = null;
                            }, 25);
                        }
                    });