获取滚动条所在页面位置。做一个类似TX的消息框

function getScroll() {
//t.当前位置（滚动条）里浏览器顶部的高度
//l当前位置（滚动条）里浏览器左边的长度(0)
//width当前浏览器的宽
//页面加起来的总高度(一般页面的高度都会大于浏览器的高度，所以就有了滚动条)。
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {

t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}

return { t: t, l: l, w: w, h: h };
}

$(function () {
window.onscroll = function () {
var a = getScroll();
document.title = "t=" + a.t + "l=" + a.l + "w=" + a.w + "h=" + a.h;
}
})

这样，就可以获取当前页面的宽度，总高度，和滚动条距离浏览器可视区域顶部的高度。

var height = document.documentElement.clientHeight;获取浏览器可视区域的高度。

//这是显示消息框，0.5秒钟就显示出来，3秒后以0.5的速度隐藏。

function Showdialog(msg) {
var a = getScroll();
var height = document.documentElement.clientHeight;
$("#loginShow").css("left", (a.w - 210) / 2).css("top", height / 2+a.t);
$("#loginShow").slideDown(500);
$("#div2").text(msg);
setTimeout(function () { $("#loginShow").slideUp(500) }, 3000)
}

 

 

div代码

<div id="loginShow">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>

css代码

#loginShow{ width:210px; font-family:微软雅黑; display:none; font-size:18px; height:52px; position:absolute;}
#div1{ width:44px; height:52px; float:left; background:url(/content/images/qzonebg.gif) no-repeat -6px 0px;}
#div2{ width:152px; font-size:18px; color:#4d454f; line-height:50px; padding-left:10px; height:52px; float:left; background:url(/content/images/qzonebg.gif) repeat-x 0px -161px;}
#div3{ width:4px; height:52px; float:left; background:url(/content/images/qzonebg.gif) no-repeat 0px 0px;}

附带图片一张