wordpress实现返回顶部底部、底部、留言悬浮效果

如何在wordpress实现返回顶部底部、底部、留言悬浮效果，大多数主题都包含了它，但有些主题没有这个，所以，本文就就教大家wordpress如何实现返回顶部底部、底部、留言效果。效果如下：

div代码：

<div>

<a id=”roll_top” title=”返回顶部” ></a>

<a {放下面的PHP代码} title=”如果您有意见，请反馈给我们！”></a>

<a id=”fall” title=”返回底部” ></a>

</div> <?php if ( !is_home() && !is_archive()): ?> id=”ct”<?php endif; ?>

上面段代码放在footer.PHP文件里面。

css代码：

.go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absoluteright:12px;bottom:25%;border-radius:5px;box-shadow:0 0 2px #6E6E6E}

.go a{background:url(images/top.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left}

.go .top{background-position:4px 0;height:20px}

.go .feedback{background-position:4px -20px;height:32px;}

.go .bottom{background-position:4px -52px;height:22px;}

.go .top:hover{background-position:-34px 0;}

.go .feedback:hover{background-position:-34px -20px;}

go .bottom:hover{background-position:-34px -52px;}

css代码放style.css 样式表里，其中图片路径，根据你放的文件夹位置写,对css代码进行微调以适合自己的主题。

JS代码：

jQuery(document).ready(function($){

jQuery(‘#roll_top’).click(function(){$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});

jQuery(‘#ct’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#comments’).offset().top}, 800);});

jQuery(‘#fall’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.footer’).offset().top}, 800);});

});

// context

jQuery(document).ready(function(){

jQuery(‘.entry_box_s ‘).hover(

function() {

jQuery(this).find(‘.context_t’).stop(true,true).fadeIn();

},

function() {

jQuery(this).find(‘.context_t’).stop(true,true).fadeOut();

}

);

});

// more

jQuery(document).ready(function(){

jQuery(‘.entry_box’).hover(

function() {

jQuery(this).find(‘.archive_more’).stop(true,true).fadeIn();

},

function() {

jQuery(this).find(‘.archive_more’).stop(true,true).fadeOut();

}

);

});

代码使用说明：

1.在主题footer.php文件中加入div代码。

2.js代码添加进主题的自定义js文件中。如果没有，自己新建一个，然后在网页中调用。

3.css代码添加进主题的样式表中，有自定义的自行添加。没有自定义css样式文件的请直接添加进主题的style.css文件中。

4.按照喜好，自己设计一张图片，注意(设计的图片不同，css样式代码也不同，因为你需要使用css代码在图片上定位)。

来源：袁绪能微信公众号：yxnsem，分享搜索引擎营销，整合营销，实战案例等诸多干货内容。欢迎分享，转载请保留版权信息!