Add the Back to Top feature to WordPress website (two methods)

Continue sharing the WordPress tutorial. If your website has a relatively long content, you can consider adding a button to the top of the website, so that when users browse to the bottom of the page and want to return to the top, they can click back. This is also one of the ways to improve the user experience. There are many topics that actually integrate this feature. If not, you can refer to the following code to add them.

Method 1: use code

CSS code

Let’s first use the following CSS code to set the style of the back to top button, and [images/topav.jpg] can be set as your own icon style.

#gotop{
    width:38px;
    height:36px;
    position:fixed;
    bottom:25px;
    right:10px;
    top:auto;
    display:block;
    cursor:pointer;
    background: url(images/topav.jpg) no-repeat
}

*html #gotop{
    position:absolute;
    bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

script code

Next, add the following code to the footer page of the wordpress website.

<div style="display: none;" id="gotop"></div>
<script type='text/javascript'>
    backTop=function (btnId){
        var btn=document.getElementById(btnId);
        var d=document.documentElement;
        var b=document.body;
        window.onscroll=set;
        btn.onclick=function (){
            btn.style.display="none";
            window.onscroll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
            },10);
        };
        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
    };
    backTop('gotop');
</script>

Method 2: Use a plugin

If you think adding code is too troublesome, you can also directly install the Back to Top plug-in. There are many similar plug-ins, and they are very easy to use. Basically, they can be used after installation.
The following are two back to top wordpress plugins that I have used myself, you can also install and try.

Smooth Back To Top Button

https://wordpress.org/plugins/smooth-back-to-top-button/

WPFront Scroll Top

https://wordpress.org/plugins/wpfront-scroll-top/