请问如何实现这个小效果

qingwadaxia_1 2018-02-27 11:09:15
<!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显示出来
...全文
723 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingwadaxia_1 2018-03-03
  • 打赏
  • 举报
回复
引用 11 楼 jslang 的回复:
刷新页面时不是不执行代码,而是刷新页面时浏览器会多一次重置滚动条位置的操作。 因为一般浏览器在刷新页面时要保持滚动条位置不变, 所以刷新页面前要记录页面滚动条的位置,在刷新页面之后会有重置滚动条位置的操作 有些浏览器中当页面内容较少时,重置滚动条位置操作可能在window.onload事件之后进行。这样在window.onload事件中代码对滚动条位置的设置就被覆盖了。
谢谢大神回答
#麻辣小龙虾# 2018-03-01
  • 打赏
  • 举报
回复
引用 11 楼 jslang 的回复:
刷新页面时不是不执行代码,而是刷新页面时浏览器会多一次重置滚动条位置的操作。 因为一般浏览器在刷新页面时要保持滚动条位置不变, 所以刷新页面前要记录页面滚动条的位置,在刷新页面之后会有重置滚动条位置的操作 有些浏览器中当页面内容较少时,重置滚动条位置操作可能在window.onload事件之后进行。这样在window.onload事件中代码对滚动条位置的设置就被覆盖了。
明白了,谢谢大师指点,关于这类型的知识点的提高有什么好的书籍或者资料推介吗?还是得靠平时项目经验积累或者浏览博客论坛之类的,最近感觉js方面遇到了瓶颈,一直在看《js高级程序设计》《js语言精粹》之类的书籍。虽然有收获,但是没有感觉到自己js的水平有比较大的提升,大师有什么好的建议吗?谢谢~!
天际的海浪 2018-02-28
  • 打赏
  • 举报
回复
刷新页面时不是不执行代码,而是刷新页面时浏览器会多一次重置滚动条位置的操作。 因为一般浏览器在刷新页面时要保持滚动条位置不变, 所以刷新页面前要记录页面滚动条的位置,在刷新页面之后会有重置滚动条位置的操作 有些浏览器中当页面内容较少时,重置滚动条位置操作可能在window.onload事件之后进行。这样在window.onload事件中代码对滚动条位置的设置就被覆盖了。
#麻辣小龙虾# 2018-02-28
  • 打赏
  • 举报
回复
引用 9 楼 jslang 的回复:
[quote=引用 8 楼 qingwadaxia_1 的回复:] [quote=引用 7 楼 jslang 的回复:]

<!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>
大神 你这个好像只能生效一次, 打开之后再刷新就没反应了[/quote] 加个延时啊

window.onload=function () {
	var cc = document.getElementById('cc');
	setTimeout(function(){
		document.documentElement.scrollTop = document.body.scrollTop = cc.offsetTop + cc.offsetHeight;
	}, 500);
}
[/quote] 大神,我也不太明白,为什么要加延时才可以得到想要的结果,页面不是每次载入的时候都会执行页面上的js代码吗?点击刷新页面按理来说也会执行代码,可是为什么只会执行一次呢?求指点指点。
#麻辣小龙虾# 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
  • 打赏
  • 举报
回复
引用 8 楼 qingwadaxia_1 的回复:
[quote=引用 7 楼 jslang 的回复:]

<!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>
大神 你这个好像只能生效一次, 打开之后再刷新就没反应了[/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
  • 打赏
  • 举报
回复
引用 7 楼 jslang 的回复:

<!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>
大神 你这个好像只能生效一次, 打开之后再刷新就没反应了
天际的海浪 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
  • 打赏
  • 举报
回复
引用 1 楼 zzgzzg00 的回复:

 setTimeout(function(){
        var con=document.querySelector('body');
        con.scrollTop=con.scrollHeight;
    },100);
不用定时器为什么实现不了呢 请问 能不用定时器 做吗
qingwadaxia_1 2018-02-27
  • 打赏
  • 举报
回复
引用 2 楼 CodingNoob 的回复:
<!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>
这个好像不行 1楼大神的可以 不过还有其它类似的方法吗 因为我记得之前有一个不一样的

87,842

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧