[WordPress教程]代码实现页面悬浮按钮,提高页面的阅读友好性

目前茶话汇首页显示的最新文章数量在10篇左右,大部分文章有上千文字并且带有配图,在页面上下拖动时很不方便,因此实现一个悬浮在页面并支持直达该页面“顶部”、“底部”、“评论框”的入口,便可极大的提高页面的阅读友好型,甚至可以提高读者的评论参与度,效果如下图所示(上下两个箭头可分别直达页面顶部或底部、在文章页面点击该按钮的中部则可直达文章评论框):

代码实现方式如下:
1. 需要评论的页面(文章页、留言本等),这里以文章页single.php为例,打开该文件,找到代码<!--?php get_header(); ?-->,在该代码后面追加以下代码:

<div id="roll"><div title="回到顶部" id="roll_top"></div><div title="查看评论" id="ct"></div><div title="转到底部" id="fall"></div></div>

2. 不需要评论的页面(首页、文章归档页、友情链接页等),这里以首页index.php为例,打开该文件,找到代码<!--?php get_header(); ?-->,在该代码后面追加以下代码:

<div id="roll"><div title="回到顶部" id="roll_top"></div><div title="转到底部" id="fall"></div></div>

3. 将悬浮按钮图标roll.gif放到你当前主题的image目录下

4. 将悬浮按钮的CSS代码和JS代码分别写入你当前所用主题所加载的CSS和JS文件,代码如下:

CSS代码:

/** 翻屏 **/
#roll_top, #fall {
    cursor: pointer;
    height: 50px;
    position: relative;
    width: 15px;
}
#ct {
    cursor: pointer;
    height: 50px;
    position: relative;
    width: 15px;
}
#roll_top {
    background: url("images/roll.gif") no-repeat scroll 0 0 transparent;
}
#fall {
    background: url("images/roll.gif") no-repeat scroll 0 -100px transparent;
}
#ct {
    background: url("images/roll.gif") no-repeat scroll 0 -50px transparent;
}
#roll {
	display:block;
	width:15px;
	margin-right:-224px;
	position:fixed;
	right:50%;
	top:52%;
	_margin-right:-224px;
	_position:absolute;
	_margin-top:283px;
}

JS代码:

// 滚屏
jQuery(document).ready(function(){
jQuery('#roll_top').click(function(){jQuery('html,body').animate({scrollTop: '0px'}, 800);});
jQuery('#ct').click(function(){jQuery('html,body').animate({scrollTop:jQuery('#comments').offset().top}, 800);});
jQuery('#fall').click(function(){jQuery('html,body').animate({scrollTop:jQuery('#footer').offset().top}, 800);});
});

转载请注明:运维派 » [WordPress教程]代码实现页面悬浮按钮,提高页面的阅读友好性

0
2.8k
6
  1. 很不错的说。这个似乎不那么难做。哈哈,学到了。多谢啦。