回到顶部

来源：互联网发布：文件阅读软件编辑：程序博客网时间：2024/05/17 05:59

CSDN的

-------------------------------------------

返回顶部 top按钮

运用jquery的一个插件就可以很好的解决超过一屏显示右下角返回顶部按钮
插件如下：scrolltopcontrol.js
scrolltopcontrol.js插件里边包括了详细的中文解释可已根据自己的需要修改top按钮的图片样式和位置！
很实用！

-------------------------------------

随滚动条滚动的top按钮

1.js部分：
<script type="text/javascript">
//<![CDATA[
var tips; var theTop = 600; var old = theTop;
function initFloatTips() {
tips = document.getElementByIdx_x('floatTips');
moveTips();
};
function moveTips() {
var tt=50;
if (windows.innerHeight) {
    pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop
}
else if (document.body) {
    pos = document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if (pos < theTop) pos = theTop;
if (pos != old) {
    tips.style.top = pos+"px";
    tt=10;
}
old = pos;
setTimeout(moveTips,tt);
}
//!]]>
</script>
2.css部分：
<style type="text/css">
div#floatTips{
    position:absolute;
    border:solid 1px #777;
    padding:3px;
    top:600px;
    width:23px;
    background:#333;
    color:white;
    opacity: 0.5;
    filter:alpha(opacity=50);
    left: 1242px;
}
</style>
3.body部分;
<body onload="initFloatTips()">
<div id="floatTips">
    <a href="javascript:;" onClick="$('html,body').animate({scrollTop:0},1000);">
<img src="images/top.gif" /></a></div>