hosting tutorials WeChat Top

👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.

Email Me

(如果你会中文,可以点击微信图标与我联系。)

扫一扫加我

注:因个人英文水平有限,所以暂时只能为懂中文的朋友提供wordpress建站服务

微信:18200592859 或 yrwordpress

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

2023032308273550

Add the Back to Top feature to WordPress website (two methods): If the content of your wordpress website is very long, then it is necessary to add a function of returning to the top of your website, so that users can return quickly and improve some user experience. Today’s wordpress tutorial will share with you how to add back to top function to the website.

【WP-Host/悦然wordpress建站】

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

2023032308363455

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/

继续分享wordpress建站教程。如果你的网站内容比较长,可以考虑给网站添加一个返回顶部的按钮,这样当用户浏览到页面底部又想返回顶部时,就可以一键返回了,这也算是提升用户体验的之法之一吧。现在有很多主题其实都集成了这个功能,如果没有则可以参考使用下面的代码来添加。

方法一:使用代码

CSS代码

我们先使用下面的CSS代码设置好返回顶部按钮的样式,其中的【images/topav.jpg】可以自己设置为你自己的图标样式。

#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)));
}

脚本代码

接下来把下面的代码添加到网站的footer页面就可以了。

<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>

方法二:使用插件

2023032308363455

如果你觉得添加代码太麻烦,那么也可以直接安装返回顶部插件,类似的插件非常多,使用也非常简单,基本都是安装就可以使用了。下面是我自己使用过的两个返回顶部wordpress插件,你也可以安装试试。

Smooth Back To Top Button

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

WPFront Scroll Top

https://wordpress.org/plugins/wpfront-scroll-top/
WordPress Hosting / 悦然wordpress建站

WordPress Hosting / 悦然wordpress建站

【WordPress Hosting / 悦然wordpress建站】I am a WordPress hobby from China, and I like to communicate with friends from all over the world to learn WordPress website building and maintenance related knowledge.