本文实例讲述了WordPress添加前往顶部成果的办法。分享给大家供大家参考。详细完成办法如下:
前往顶部成果不是WordPress自带的性能,这是一款js或jquery的成果,这里就来给大家引见在WordPress中添加反回顶部成果的办法.
**步:在上面主题文件footer.php底下加上这段代码:
<script src="top.js" type="text/javascript" charset="utf-8"></script >
<p id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="前往顶部">TOP</a></p>
//<![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);
}
}
}
//]]>
/*前往顶部*/
#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增加返回顶部效果的方法》的一些看法。更多内容请查看本栏目更多内容!
1. 自定义主题图片大小 图片是WordPress主题的重要组成局部,但开发者们有时会忘了对主题图片进行优化。主题...
很多冤家都在应用Wordpress写集体博客,然而又想把写的博客文章同步到其余的社交网站上,比方人人网,那怎样...
阻拦英文渣滓评论 因为绝大少数的渣滓评论都是英文的,所以国际不少冤家在应用 Some Chinese Please 插件,...
明天,特带来了5个实例技巧,至多能够协助冤家们在缩小wordpress博客的负荷上起到一点点作用吧,上面和网友...
register_sidebar()(创立侧边栏) 建设一个侧边栏,用来搁置小工具。这个函数应用的时分请放在一个函数里,...
esc_html()(本义 Html) esc_html() 函数用来本义 Html 代码,让 Html 代码不本义。 用法 esc_html( $tex...