不去在乎结果,热情地付出过,就好了.

wordpress添加滚动至顶部,底部,评论的按钮

w

已恢复

见:顶部底部按钮重见天日

用户体验不佳,已取消改功能

 

在<body></body>之间插入代码:

<div id=”shangxia”>

<div id=”shang”></div>

<div id=”comt”></div>

<div id=”xia”></div>

</div>

在网页中为对象建立位置

 

在<head></head>之间插入代码:

<?php if (is_single()) { ?>

<link rel=”stylesheet” href=”http://www.yourdomain/single_hd.css” type=”text/css” />

<?php } else { ?>

<link rel=”stylesheet” href=”http://www.yourdomain/other_hd.css” type=”text/css” />

<?php } ?>

跟据页面不同选择载入不同的样式表(有无评论)(建议加在<head></head>的最后,以免被前面覆盖)

 

在<head></head>之间插入代码:

<script type=”text/javascript” src=”http://www.yourdomain/shangxia.js”></script>

载入所需的js代码,wordpress一般已经载入jQuery(建议加在<head></head>的最后,以免不起作用)

上传shangxia.js文件,single_hd.css文件,other_hd.css文件,三个按钮文件(上,下,评论)

 

 

shangxia.js文件:

jQuery(document).ready(function($){var s= $(‘#shangxia’).offset().top;$(window).scroll(function (){$(“#shangxia”).animate({top : $(window).scrollTop() + s + “px” },{queue:false,duration:500});});$body = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(‘html’) : $(‘body’)) : $(‘html,body’);$(‘#shang’).click(function(){$body.animate({scrollTop: ‘0px’}, 400);});$(‘#xia’).click(function(){$body.animate({scrollTop:$(‘#footer’).offset().top}, 800);});$(‘#comt’).click(function(){$body.animate({scrollTop:$(‘#comments’).offset().top}, 800);});});

 

single_hd.css文件:

@charset “utf-8”;/* CSS Document */
#shangxia{position:absolute; top:40%; left:50%; margin-left:-535px; display:block; }#shang{ background:url(https://www.yourdomain/shang.png) no-repeat; position:relative; cursor:pointer; height:42px; width:32px; margin:10px 0; }#comt{ background:url(https://www.yourdomain/comt.png) no-repeat center; position:relative; cursor:pointer; height:32px; width:32px; margin:10px 0; }#xia{ background:url(https://www.yourdomain/xia.png) no-repeat center; position:relative; cursor:pointer; height:42px; width:32px; margin:10px 0; }

 

other_hd.css文件:

@charset “utf-8”;/* CSS Document */
#shangxia{ position:absolute; top:40%; left:50%; margin-left:-535px; display:block; }#shang{ background:url(https://www.yourdomain/shang.png) no-repeat; position:relative; cursor:pointer; height:42px; width:32px; margin:10px 0; }#xia{ background:url(https://www.yourdomain/xia.png) no-repeat center; position:relative; cursor:pointer; height:42px; width:32px; margin:10px 0; }

Add comment

2 × 4 =

不去在乎结果,热情地付出过,就好了.
某一天,你所坚持的,和承担过的一切,会有回应。它们并非失去踪迹,只是需要时间抵达。这和星光落入眼睛里,是一样的道理。

近期文章

近期评论