WordPress增加返回顶部效果的方法
来源:本站原创|时间:2020-01-11|栏目:WordPress|点击: 次
本文实例讲述了WordPress增加返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下:
返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.
第一步:在下面主题文件footer.php底下加上这段代码:
复制代码
代码如下:<script src="top.js" type="text/javascript" charset="utf-8"></script >
<div id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div>
<div id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div>
top.js代码如下:
复制代码
代码如下://<![CDATA[
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]>
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]>
第二步:在主题文件style.css文件中加入以下样式:
复制代码
代码如下:/*返回顶部*/
#scroll {display:block; width:30px; margin-right:-380px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}
#scroll {display:block; width:30px; margin-right:-380px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}
这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.
希望本文所述对大家的WordPress建站有所帮助。
您可能感兴趣的文章
阅读排行
本栏相关
- 05-31wordpress修改后台登录地址教程
- 05-31WordPress自定义用户头像实现代码
- 01-11WordPress增加文章排序方式
- 01-11修改wordpress上传临时目录解决wordpre
- 01-11wordpress get
- 01-11自己做wordpress评论插件修改评论样式
- 01-11在wordpress文章末尾添加内容的简单方
- 01-11wordpress获取文章评论数过滤掉作者代
- 01-11wordpress dynamic
- 01-11不用wordpress插件显示文章浏览统计功
随机阅读
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-10SublimeText编译C开发环境设置
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10C#中split用法实例总结
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-11ajax实现页面的局部加载
- 04-02jquery与jsp,用jquery