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

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

运维派隶属马哥教育旗下专业运维社区,是国内成立最早的IT运维技术社区,欢迎关注公众号:yunweipai
领取学习更多免费Linux云计算、Python、Docker、K8s教程关注公众号:马哥linux运维

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

代码实现方式如下:
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代码:

[code lang=”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;
}[/code]

JS代码:

[code lang=”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);});
});
[/code]

本文链接:https://www.yunweipai.com/2007.html

网友评论comments

回复 不錯 取消回复

您的电子邮箱地址不会被公开。

  1. 灰狼说道:

    没看到这个框的?

  2. 酷特尔说道:

    很不错的说。这个似乎不那么难做。哈哈,学到了。多谢啦。

  3. phpvar说道:

    现在右侧那排按钮一直显示,怎么不加个判断控制下显示状态….

Copyright © 2012-2022 YUNWEIPAI.COM - 运维派 京ICP备16064699号-6
扫二维码
扫二维码
返回顶部