返回网页顶部和直达网页底部代码

2012年09月7日

这帖子是参考网上一篇帖子修改得来的.图片我是截Firefox15.0的转到图片修改成的.

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript">   
jQuery(document).ready(function($){   
$('#roll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});   
$('#roll_bottom').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});   
});   
</script>
<div id="roll"><div title="回到顶部" id="roll_top"></div><div title="转到底部" id="roll_bottom"></div></div>

将这边的代码复制粘贴到你的主题或模板目录下的header.php文件里,具体是哪行可以自己看着修改.#footer这个是你网页里底部的ID,如果不知道可以查看一下网页源代码看一看你网页的最底部这个ID是什么来修改.

html body {   
_background-image:url(/images/Top-bottom.png);   
_background-attachment:fixed;   
}   
#roll_top,#roll_bottom {   
position:relative;   
cursor:pointer;   
/*这个是你所用的返回顶部底部的背景图片的高度  
但这里是图片高度的一半,道理很简单  
也就是将图片切割成了两部分  
一半是作为返回顶部的热点,一半是到达底部的*/  
height:32px;   
width:37px;/*这个是图片的宽度*/  
}   
#roll_top {   
background:url(/images/Top-bottom.png) no-repeat;/*图片的名字及路径,请注意路径的书写*/  
}   
#roll_bottom {   
background:url(/images/Top-bottom.png) no-repeat 0 -40px;/*-40px也是图片高度的一半,请根据实际情
况修改*/  
}   
#roll {   
display:block;   
width:15px;   
margin-right:-50px;  /*这个是距离的位置,请自行调整*/  
position:fixed;   
rightright:50%;   
top:50%;   
_margin-rightright:-50px;/*Hack IE6的,请用IE6打开自行调整*/  
_position:absolute;   
_margin-top:300px;   
_top:expression(eval(document.documentElement.scrollTop));   
}  
/*这里结束,html body { 这行开始*/

将以上的内容复制粘贴到你当前主题或模板目录里的style.css文件里.
jquery.min
将这个文件下载解压缩后上传到你的根目录里.

将图片下载上传到你的images目录里.


sicnature ---------------------------------------------------------------------
Your current IP address is: 54.80.82.9
Your IP address location: 国
Your IP address country and region: 美国 美国
Your current browser is:
Your current system is:
Original content, please indicate the source:
同福客栈论坛 | 海南仙岛海南乡情论坛 | JiaYu Blog
sicnature ---------------------------------------------------------------------
Welcome to reprint. Please indicate the source http://www.myzhenai.com.cn/post/756.html

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注