WordPress主题添加一个滚屏按钮(一键到达顶部底部)

WordPress主题添加一个滚屏按钮(一键到达顶部底部)-狐狸库
wordpress

似乎很多人都喜欢弄一个固定的滚屏按钮,这个小功能可以方便读者阅读。

其实我们使用的操作系统早已提供了这一功能,那就鼠标中键(滚轮),使用起来远比这个按钮方便,不过鼠标中键貌似都不是很抗用,另外,也为点缀一下博客,弄个固定的滚屏按钮也不错。

今天提供的滚屏代码与HotNews pro主题集成的滚屏按钮类似,只不过是固定在屏幕的边缘并具有鼠标悬停效果,下面以WordPress默认主题Twenty Ten为例,开始折腾。

打开Twenty Ten主题的header.php模版文件,把以下代码

<div id=\"scroll\">
<a class=\"scroll_t\" title=\"Top\" href=\"#header\"></a>
<?php if(is_single() || is_page()) { ?><a class=\"scroll_c\" title=\"Comments\" href=\"#comments\"></a><?php } ?>
<a class=\"scroll_b\" title=\"Bottom\" href=\"#footer\"></a>
</div>

添加到这句后面

<div id=\"wrapper\"class=\"hfeed\">

也可添加到footer.php中。

再把下面的样式添加到style.css的最后面:

/** 滚屏 **/
#scroll {
position:fixed;
top:40%;
right:0;
width:24px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight * 0.4));
}
#scroll a {
display:block;
float:right;
width:24px;
height:24px;
background:#fffurl(images/scroll.gif) no-repeat;
}
#scroll a:hover {
background:#fffurl(images/scroll.gif) no-repeat;
}
#scroll a.scroll_t:hover {
background-position:-24px 0;
}
#scroll a.scroll_c {
background-position:0 -24px;
}
#scroll a.scroll_c:hover {
background-position:-24px -24px;
}
#scroll a.scroll_b {
background-position:0 -48px;
}
#scroll a.scroll_b:hover {
background-position:-24px -48px;
}
html body {background-image:url(about:blank);background-attachment:fixed;}/** 防止IE6抖动 **/

最后把下面的图片扔到主题的images文件夹中,刷新页面试试按钮效果。

WordPress主题添加一个滚屏按钮(一键到达顶部底部)-狐狸库

可能你会发现滚屏有些生硬,对了还缺少JS滑动特效。

下载:jquery.min.js,放到Twenty Ten主题根目录中,并在header.php模版:

<link rel=\"pingback\" href=\"<?php bloginfo( \'pingback_url\' ); ?>\" />

下面添加:

<script type=\"text/javascript\" src=\"<?php bloginfo(\'stylesheet_directory\'); ?>/jquery.min.js\" ></script>
<script type=\"text/javascript\">
jQuery(document).ready(function($){
$(\'.scroll_t\').click(function(){$(\'html,body\').animate({scrollTop: \'0px\'}, 800);});
$(\'.scroll_c\').click(function(){$(\'html,body\').animate({scrollTop:$(\'#comments\').offset().top}, 800);});
$(\'.scroll_b\').click(function(){$(\'html,body\').animate({scrollTop:$(\'#footer\').offset().top}, 800);});
});
</script>

注:如果你的主题已加载了jquery.js,就不用重复加载jquery.min.js了。

最后,再刷新一下页面,这回效果应该出来了。

注:如果你的主题标签选择器不是#header、#comments和#footer可以对上面代码作相应的修改。

经常看见有的网友也弄了个滚屏按钮,大大的回旋箭头,JS特效晃晃悠悠,严重干扰阅读者的视线。

顺便再给大家提供一个双击滚屏代码:

<script type=\"text/javascript\">
var currentpos,timer;
function initialize()
{
timer=setInterval(\"scrollwindow()\",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
window.scrollBy(0,1);
}
document.onmousedown=sc
document.ondblclick=initialize
</script>

这段JS代码,可实现双击鼠标自动滚屏,单击停止,效果可以在此页面试试。

温馨提示: 本文最后更新于2022/10/20 03:51:41若文章内容或图片失效,请留言联系站长反馈!
!
也想出现在这里? 联系我们
创意广告
© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容