用代码给WordPress添加返回顶部按钮

返回顶部功能对网站的用户体验相当大,如果没有这个功能体验是真的差,比如页面浏览到一半的时候需要回到顶部,要么鼠标滑动滚动条,要么滚轮慢慢滚动,如果是手机版还得手动慢慢往上滑,网站主题没有返回顶部功能,使用了几天后非常难受。

今天百度了一下给WordPress添加返回顶部功能,推荐插件的比较多,也有很多代码版的,但代码都相对杂乱,今天记录一下WP日记使用的返回顶部代码版,比较简单。

1,准备代码

<div id="full" class="gotop">
<a><img src="<?php bloginfo('template_url'); ?>/img/top.png" width="50"></a>
</div>
<script src="<?php bloginfo('template_url'); ?>/js/gotop.js" type="text/javascript"></script>

将上面这段代码加入到主题模板里面的foot.php 中,打开foot.php,粘贴到 </body>之前即可。

<?php bloginfo('template_url'); ?> 这个指的是你的主题路径,就是当前主题目录的img目录和js目录里放入返回顶部图标和需要用到的JS文件。

关于返回顶部图标推荐去阿里图库找,里面有很多你用得着的图标。

2,添加CSS代码

.gotop {position:fixed; right:0px;left: 1035px; bottom:100px; text-align:center; cursor:pointer;}

将以上CSS代码添加进当前主题的CSS文件里,网上很多代码的返回顶部图标位置都是从电脑屏幕边上算距离的,以上CSS是从网站中心点开始,调整为将图标放到网站边上,可以查看本站演示,以上代码适合窄屏模板。

如图

用代码给WordPress添加返回顶部按钮

.gotop {left: 80%; bottom:15px;}

以上代码是放到手机自适应的位置,图标会在屏幕的右下角,如图

用代码给WordPress添加返回顶部按钮

将CSS代码放到CSS文件的原因是可能会修改手机版的位置,所以放到主题的CSS里比较方便。

2,准备JS文件

var isie6 = window.XMLHttpRequest ? false : true; function newtoponload() { var c = document.getElementById("full"); function b() { var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (a > 0) { if (isie6) { c.style.display = "none"; clearTimeout(window.show); window.show = setTimeout(function () { var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (d > 0) { c.style.display = "block"; c.style.top = (400 + d) + "px" } }, 300) } else { c.style.display = "block" } } else { c.style.display = "none" } } if (isie6) { c.style.position = "absolute" } window.onscroll = b; b() } if (window.attachEvent) { window.attachEvent("onload", newtoponload) } else { window.addEventListener("load", newtoponload, false) } document.getElementById("full").onclick = function () { window.scrollTo(0, 0) };

用代码编辑器新建一个文件,推荐使用Notepad++,DW也可以,只是前者轻便,将以上代码复制粘贴进去后保存为gotop.js

这样用代码给WordPress添加返回顶部按钮就轻松的实现了。

至此,本文结束。

给TA打赏
共{{data.count}}人
人已打赏
WP笔记

WordPress制作插件添加常用代码

2020-5-8 22:43:12

WP笔记

WordPress采集Markdown内容加密类网站

2020-5-29 19:09:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索