87,842
社区成员




window.onload=function () {
var cc = document.getElementById('cc');
setTimeout(function(){
document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
}, 500);
}
[/quote]
大神,我也不太明白,为什么要加延时才可以得到想要的结果,页面不是每次载入的时候都会执行页面上的js代码吗?点击刷新页面按理来说也会执行代码,可是为什么只会执行一次呢?求指点指点。<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Document</title>
</head>
<body>
<div style="height:10000px;"></div>
<div id="cc" style="display:none;height:20px;background:#ccc;"></div>
<div style="height:200px;"></div>
<script>
(function(){
var cc = document.getElementById('cc');
var windheight = document.body.offsetHeight; //页面总的宽度
var h= document.documentElement.clientHeight || document.body.clientHeight; //视口宽度
//监听浏览器滚动事件
window.onscroll = function(){
console.log(1);
var scrollTop = document.body.scrollTop; //页面滚动高度
//判断页面是否滚动到底部,如果滚动到底部条件:滚动条滚动高度 >= 页面总高度 - 浏览器视口高度
if(scrollTop >= (windheight - h)){
cc.style.display = "block";
}
}
}());
</script>
</body>
</html>
setTimeout(function(){
var con=document.querySelector('body');
con.scrollTop=con.scrollHeight;
},100);
window.onload=function () {
var cc = document.getElementById('cc');
setTimeout(function(){
document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
}, 500);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Document</title>
</head>
<body>
<div style="height:10000px;"></div>
<div id="cc" style="height:20px;background:#ccc;"></div>
<div style="height:200px;"></div>
<script>
window.onload=function () {
var cc = document.getElementById('cc');
document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Document</title>
</head>
<body>
<div style="height:10000px;"></div>
<div id="cc" style="display:none;height:20px;background:#ccc;"></div>
<div style="height:200px;"></div>
<script>
(function(){
var cc = document.getElementById('cc');
//设置页面滚动的高度,不需要带px单位
document.body.scrollTop = document.body.scrollHeight;
cc.style.display = "block";
}());
</script>
</body>
</html>