源码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<script>
function goScroll(a){
var space=document.getElementById(a).offsetTop;
document.getElementById(a).style.top=space+'px';
var goTo =0;
window.setInterval(function(){
var height=document.documentElement.scrollTop+document.body.scrollTop+space;
var top=parseInt(document.getElementById(a).style.top);
if (height!=top) {
goTo=height-parseInt((height-top)*0.9);
document.getElementById(a).style.top=goTo+'px';
}
},50);
}
function init(){
goScroll('conl');
}
</script>
<style>
#conl{
background-color: gray;
left: 0px;
top: 100px;
width: 100px;
height: 100px;
position: absolute;
z-index=1;
}
body{
height: 8000px;
}
</style>
<body style="text-align: center" onload="init()" >
<div id="conl">这是一个广告</div>
</body>
</html>
几个问题
1.
offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
document .documentElement.scrollTop; 要获取当前页面的滚动条纵坐标位置，用：
网页被卷去的高： document .body.scrollTop;
想了解更多点这个
document.body.scrollTop与document.documentElement.scrollTop兼容,这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！
看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用JavaScript进行判断？其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。
2.parseInt()
parseInt(string, radix)
radix，表示转换的基数，也就是我们常说的2进制、8进制、10进制、16进制等。范围从2~36，但我们在JS中一般调用该方法时，基本都是以10为基数进行转换的。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
3.setInterval
格式如下：
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);
//这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。
4.alert(typeof(top));
调试用比较方便
5.比较运算符
== 等于===全等!=不等于 >大于 <小于>=大于或等于 <=小于或等于
6.扩展
function back(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
网友评论