87,842
社区成员
发帖
与我相关
我的任务
分享请问如何实现这个小效果
<!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>
var cc = document.getElementById('cc');
</script>
</body>
</html>
我想让cc div 自动滚动到页面底部，就是把滚动条滚动到最底部 让cc div显示出来
<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>
var cc = document.getElementById('cc');
</script>
</body>
</html>
我想让cc div 自动滚动到页面底部，就是把滚动条滚动到最底部 让cc div显示出来
...全文
请发表友善的回复…
发表回复
qingwadaxia_1 2018-03-03
- 打赏
- 举报
谢谢大神回答
#麻辣小龙虾# 2018-03-01
- 打赏
- 举报
明白了，谢谢大师指点，关于这类型的知识点的提高有什么好的书籍或者资料推介吗？还是得靠平时项目经验积累或者浏览博客论坛之类的，最近感觉js方面遇到了瓶颈，一直在看《js高级程序设计》《js语言精粹》之类的书籍。虽然有收获，但是没有感觉到自己js的水平有比较大的提升，大师有什么好的建议吗？谢谢~！
天际的海浪 2018-02-28
- 打赏
- 举报
刷新页面时不是不执行代码，而是刷新页面时浏览器会多一次重置滚动条位置的操作。
因为一般浏览器在刷新页面时要保持滚动条位置不变，
所以刷新页面前要记录页面滚动条的位置，在刷新页面之后会有重置滚动条位置的操作
有些浏览器中当页面内容较少时，重置滚动条位置操作可能在window.onload事件之后进行。这样在window.onload事件中代码对滚动条位置的设置就被覆盖了。
#麻辣小龙虾# 2018-02-28
- 打赏
- 举报
大神 你这个好像只能生效一次， 打开之后再刷新就没反应了[/quote]
加个延时啊
window.onload=function () {
var cc = document.getElementById('cc');
setTimeout(function(){
document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
}, 500);
}
#麻辣小龙虾# 2018-02-27
- 打赏
- 举报
<!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>
似梦飞花 2018-02-27
- 打赏
- 举报
setTimeout(function(){
var con=document.querySelector('body');
con.scrollTop=con.scrollHeight;
},100);
天际的海浪 2018-02-27
- 打赏
- 举报
大神 你这个好像只能生效一次， 打开之后再刷新就没反应了[/quote]
加个延时啊
window.onload=function () {
var cc = document.getElementById('cc');
setTimeout(function(){
document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
}, 500);
}
qingwadaxia_1 2018-02-27
- 打赏
- 举报
大神 你这个好像只能生效一次， 打开之后再刷新就没反应了
天际的海浪 2018-02-27
- 打赏
- 举报
<!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>
qq_35269473 2018-02-27
- 打赏
- 举报
var winh=document.body.offsetHeight;
var viewh=window.screen.height;
window.onscroll=function(){
var scrollTop=document.scrollY;
if(scrollTop>=(winh-viewh)){
css.style.display="block";
}
}
#麻辣小龙虾# 2018-02-27
- 打赏
- 举报
我理解错你的需求了，以为你是要鼠标页面滚动到底部显示cc，不用定时器也可以，但是你要将js放到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>qingwadaxia_1 2018-02-27
- 打赏
- 举报
不用定时器为什么实现不了呢 请问 能不用定时器 做吗
qingwadaxia_1 2018-02-27
- 打赏
- 举报
这个好像不行 1楼大神的可以 不过还有其它类似的方法吗 因为我记得之前有一个不一样的
