图片:(goTopBtn.png)【全透明】
css:
/***** 返回顶部按钮 *****/
body {_background-image: url(about:blank); _background-attachment: fixed; }/*防止按钮抖动*/
#goTopBtn { position:fixed; text-align:center; width:50px; height:50px; line-height:50px; bottom:0px; font-size:12px; cursor:pointer; left:50%; margin-left:480px; _position: absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight - this.offsetHeight)); _background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/goTopBtn.png',sizingMethod='image')}
html:
<!--****************放在页面head部分***********************-->
<!--引入js-->
<script type="text/javascript" src="../js/scrolltop.js"></script >
<!--引入js-->
<!--****************放在页面底部***********************-->
<!-- 返回顶部按钮 begin -->
<div style="display: none" id="goTopBtn"></div>
<script type="text/javascript">goTopEx();</script >
<!-- 返回顶部按钮 end -->
js(scrolltop.js)
// JavaScript Document
function goTopEx(){
var obj=document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=value;
}else{
document.body.scrollTop=value;
}
}
window.οnscrοll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";
var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight;
obj.style.bottom=0+"px";
if(h<350){
obj.style.bottom=340+"px";
obj.style.top="auto";
}
}
obj.οnclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
JS第二版 原 Html 和Css 不变 引js的语句也不变
----【武哥增强版...修正上一版,到达底部之前 抖动的效果】
// JavaScript Document
function goTopEx(){
var obj=document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=value;
}else{
document.body.scrollTop=value;
}
}
obj.οnclick=function(){
var goTop=setInterval(scrollMove,1);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
//让返回顶部标签,始终停在footer 之前!
var btmHeight = (-[1,])?340:350;
window.οnscrοll=function(){
getScrollTop()>0?obj.style.display="":obj.style.display="none";
obj.style.bottom=0+"px";
if(getDisFromBottom() <= btmHeight){
obj.style.bottom=getDisFromBottom() + "px";
obj.style.top="auto";
}
}
function getDisFromBottom() {
var dis = getScrollTop() +getClientHeight() + btmHeight - getScrollHeight();
return dis > 0 ? dis : 0;
}
function getScrollHeight() {
return getDocEle().scrollHeight;
}
function getClientHeight() {
return getDocEle().clientHeight;
}
function getDocEle() {
return document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
}
}