ECshop 开发人性小功能之一
图中左手边三个图标,功能分别是滑动到顶部、到评论、到底部。具体代码:
?
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>// 一个div标签包裹着三个空div标签而已,只为插入显示内容,可放header.php内
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),然后向左移动520px(需自行调整!!!) */#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为800毫秒$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});//点击id="comt"对象时,滑动至id="comment"相对浏览器滚动条的距离,时间为800毫秒$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
提示:注意各id(#)或者class(.)之间对应的关系,css中margin-left:-520px;请自行调试!