北极寒流 » 网络资源 » 免插件实现返回顶部滑动效果 - 2010.08.19

免插件实现返回顶部滑动效果

至于这个所谓的返回顶部滑动效果是怎么回事,大家可以先看看壹品集博客的左侧的效果,这个效果我也不好怎么用文字来表达。大家还是看效果最实在。要实现这种效果也是需要jQuery库的支持,所以在实现这种滑动效果前自然是要为你的WordPress博客引入jQuery库了。如何加载jQuery库。壹品集有文章说明。

1、大家看见的文章中左手边三个图标,功能分别是滑动到顶部、到评论、到底部。具体代码:
(PHP判断代码,首页只显示上下图标,其他有评论图标)

<?php if (is_home()) { ?>
<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
<?php } else { ?>
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<?php } ?>

上面这段代码只是一个div标签包裹着三个空div标签而已,只为插入显示内容,可放header.php内

2、接下来就是css部分了,壹品集的css样式

/* 左侧滑动效果 */

#shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;}

#shang{background:url(images/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

#comt{background:url(images/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}

#xia{background:url(images/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

css中的那个图片,大家可以自行制作,当然直接从壹品集这里拿走也是没问题,因为我也是从其他人那里拿过来的。

3、下面部分是JQ代码部分了

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'}, 800);});

$('#comt').click(function(){$body.animate({scrollTop:$('#addcomment').offset().top}, 800);});

$('#xia').click(function(){$body.animate({scrollTop:$('#foot_copyright').offset().top}, 800);});

提示:注意各id(#)或者class(.)之间对应的关系,css中margin-left:-520px;请自行调试!

特别要注意的是JQ代码部分中的$('#comt').click(function(){$body.animate({scrollTop:$('#addcomment').offset().top}, 800);});的意思是点击id="comt"对象时,滑动至id="addcomment"相对浏览器滚动条的距离,时间为800毫秒,由于模板的不同,这个ID请与你的模样相对应,在你的模板可能就不是滑动到id="addcomment"这里了。那个#foot_copyright也是,当时我就是这里出了点问题,一直没效果。希望大家不要犯我一样的错误。

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*