0、js获取高度
1
2
3
4
5
6
|
document.all // 只有ie认识
document.body.clientHeight // 文档的高,屏幕的文档区域的高
documemt.documentElement.clientHeight // 有效的高,屏幕可视的高
document.documentElement.scrollHeight // 屏幕的总高度
document.documentElement.scrollTop // 滚动的高
|
1、首先,我们需要图片的支持,至少需要一张“置顶”的图片
2、然后,到网上找一张比较大的图片,到时直接多放几张到网页上就可模拟页面可滚动效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
< html >
< head >
< style type = "text/css" >
#scroll {
width: 62px;
height: 50px;
right: 50px;
bottom: 50px;
display: none;
cursor: pointer;
position: fixed;
background: url("goTop.png");
}
</ style >
</ head >
< body >
< div >
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
< img src = "tangwei.jpg" />
</ div >
< div id = "scroll" ></ div >
</ body >
< script type = "text/javascript" >
// 获取置顶对象
var obj = document.getElementById('scroll');
// 置顶对象点击事件
obj.onclick = function() {
var timer = setInterval(function() {
window.scrollBy(0, -50);
if (document.body.scrollTop == 0) {
clearInterval(timer);
};
}, 2);
}
// 窗口滚动检测
window.onscroll = function() {
obj.style.display = (document.body.scrollTop >= 300) ? "block" : "none";
}
</ script >
</ html >
|
3、代码不多也不难,耐心一点都可以读懂,不规范的请忽略,效果图如下:
4、后来发现了几个问题
ie6不支持 position:fixed; 所以置顶的图片会一直位于最底部;
按钮点击后,有些浏览器会有滚动置顶功能(谷歌,360,Opera等),而有些浏览器不支持 document.body.scrollTop(火狐,IE,Safari)
5、于是尝试解决,第一种问题可以直接用样式 css 来,而第二种则需要用 js,先来解决第一种,在网上有很多答案:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
*html{ background-image : url (about:blank);
background-attachment : fixed ;
} # scroll {
width : 62px ;
height : 50px ;
right : 50px ;
bottom : 50px ;
cursor : pointer ;
position : fixed ;
display : none ;
background : url ( "goTop.png" );
/* 兼容ie6位置fixed问题 */
_position : absolute ;
_bottom : auto ;
/*_top:expression(eval(document.documentElement.scrollTop));*/
_top :expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10 )|| 0 )-(parseInt(this.currentStyle.marginBottom, 10 )|| 0 )));
_margin-bottom : 40px ;
} |
你会发现有下划线都是用来兼容 ie6 的,因为只有 ie6 不支持 position:fixed;
将元素固定在浏览器顶部用:
1
|
_top :expression(eval(document.documentElement.scrollTop));
|
将元素固定在浏览器底部用:
1
|
_top :expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10 )|| 0 )-(parseInt(this.currentStyle.marginBottom, 10 )|| 0 )));
|
然后你再用 _margin-top:10px; 或 _margin-bottom:10px; 来修改位置。
6、第二种则是需要用到 js:
主要是滚动的高度在浏览器之间支持问题, document.body.scrollTop
因为: document.body.scrollTop 主要是谷歌浏览器,360浏览器,没DOCTYPE的ie等支持
document.documentElement.scrollTop 则是火狐浏览器,有DOCTYPE的ie浏览器支持
最麻烦的是苹果的Safari 竟然只对window.pageYOffset支持
于是可写成这样:
1
|
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
|
7、整体的全部js代码是这样的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type= "text/javascript" >
// 获取置顶对象
var obj = document.getElementById( 'scroll' );
var scrollTop = null ;
// 置顶对象点击事件
obj.onclick = function () {
var timer = setInterval( function () {
window.scrollBy(0, -100);
if (scrollTop == 0)
clearInterval(timer);
}, 2);
}
// 窗口滚动检测
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
obj.style.display = (scrollTop >= 300) ? "block" : "none" ;
}
</script> |