这帖子是参考网上一篇帖子修改得来的.图片我是截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>
<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 { 这行开始*/
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 { 这行开始*/
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 ---------------------------------------------------------------------
I P 地 址: 13.59.206.196
区 域 位 置: 美国俄亥俄都柏林
系 统 信 息:
Original content, please indicate the source:
同福客栈论坛 | 蟒蛇科普 ｜ 海南乡情论坛 | JiaYu Blog
sicnature ---------------------------------------------------------------------
Welcome to reprint. Please indicate the source https://myzhenai.com/post/756.html
没有评论