How to add Go To Top link | Empire - Documentation | JoomShaper

Empire

Updated Last: 20 March 2023

How to add Go To Top link

You can add Go/Scroll To Top link in several ways:

Solution #1

The basic one will be to add just simple HTML code in footer/Copyright Notice section:

© 2017 My Company <a href="#sp-page-title" title="Go to top" style="text-align:right; color:#000">
<strong> Go to Top</strong></a>

Even this basic solution allows allow visitors to easily return to the top of the page.

 

Solution #2

If you need something which look much better, you can install addcional plugin/module or use more advanced code:

 <button onclick="topFunction()" id="GoTop" title="Go to top">Top</button>

Also use it in copyright notice textarea. Then in Helix3 Custom Code tab please add also this.

Add custom CSS:

#GoTop {
    display: none;  
    position: fixed;
    bottom: 20px;  
    right: 30px;  
    z-index: 99;  
    border: none;  
    outline: none;
    background-color: red; /* Set a background color */
    color: white;  
    cursor: pointer;
    padding: 15px;  
    border-radius: 5px;
}

#GoTop:hover { background-color: #555; }

Add custom JavaScript:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("GoTop").style.display = "block";
    } else {
        document.getElementById("GoTop").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;  
}