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

如何在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,分享搜索引擎营销,整合营销,实战案例等诸多干货内容。欢迎分享,转载请保留版权信息!

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏是最好的支持!

支付宝扫一扫打赏

微信扫一扫打赏