-
回到顶部按钮的CSS定位查看全部
-
window.onscroll=function() {}//当滚动条发生滚动时触发。 IE识别document.documentElement.scrollTop 谷歌识别document.body.scrollTop 各浏览器兼容写法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 为窗口添加滚动条滚动事件 window.onscroll=function(){}; //在滚动条发生滚动是触发 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器！ 获取滚动高度： chrome:document.body.scrollTop IE:document.documentElement.scrollTop 舍入： Math.floor() 向下舍入取整 Math.ceil() 向上舍入取整 [ 收起全文 ]查看全部
-
window是一个窗口类，onscroll是窗口类window的对象,滚动滚动条时触发。查看全部
-
// 获取页面可视区的高度 var clientHeight = document . documentElement . clientHeight; // 获取滚动条高度， IE 和 其他主流浏览器 var offsetTop = document . documentElement . scrollTop || document . body . scrollTop ; 使用JavaScript实现“按钮”的显示与隐藏 1、隐藏回到顶部按钮 (1)在样式表回到顶部按钮设置成display:none; 2、获取页面可视区的高度 (1)创建变量，获取页面可视区的高度 var clientHeight=document.documentElement.clientHeight; (2)弹出页面可视区高度 alert(clientHeight); (3)显示回到顶部按钮，把样式表中的display先删除 (4)刷新页面获取高度后隐藏 3、增加判断，在滚动的时候 (1)获取滚动条距离顶部的高度 var disTop = document.documentElement.scrollTop || document.body.scrollTop; (2)增加判断，让按钮显示出来 （在样式表中可以改成display:block;就能显示，但如何用js显示） if(osTop>=clientHeight){ obtn.style.display='block';//把样式表中的display改成block } (3)回到第一屏隐藏 else{ obtn.style.display='none'; }查看全部
-
页面加载后触发，绑定事件查看全部
-
为什么改成负的就能滚到头？ 回答这个问题前，先来看下为什么不改成负数就不行呢？ 注意这句：var ispeed = Math.floor(osTop / 6); 当上面osTop的值小于6这个除数时，ispeed的值始终等于0（向下取整了），所以问题来了，当ispeed的值不变时，osTop - ispeed 这个控制滚动条的值也就不变了，所以滚动条永远到不了顶。 实际中，当osTop = 5 时，ispeed 为 0，下面两句也始终为5： document.documentElement.scrollTop = osTop - ispeed; // 兼容IE document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome 所以滚动条一直停在距离顶部5px的地方。 OK，那为什么改成负数就行了呢？其实改负数的目的就是让ispeed的值不为0. 实际中，当osTop = 5（或小于5时），Math.floor(osTop / 6) 的值为 -1，这样就使得 osTop + ispeed 的值始终能减小下去，直至到0. 这种用负数的方法不好理解，我是采用Math.ceil()这个方法（向上取整）实现的，代码如下： obtn.onclick = function(){ // 定时器开启 timer = setInterval(function(){ // 获取当前滚动条距离顶部距离 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = osTop - ispeed; document.body.scrollTop = osTop - ispeed; if(osTop == 0){ clearInterval(timer); } },30); }查看全部
-
1、点击之后让滚动条回到顶部： （1）获取滚动条到顶部的距离var disTop = document.documentElement.scrollTop || document.body.scrollTop; （2）设置定时器不断改写距离数值document.documentElement.scrollTop = document.body.scrollTop -= 200； 到达顶部的时候清除定时器：if(disTop == 0){ clearInterval(timer); } （3）定义一个渐变的速度，让滚动平滑些： var iSpeed = Math.ceil(disTop / 5);//Math.ceil()是为了确保滚动条已经彻底到顶。 document.documentElement.scrollTop = document.body.scrollTop = disTop - iSpeed; 2、滚动条距离顶部一定距离时让“回到顶部”出现： window.onscroll = function(){ var disTop = document.documentElement.scrollTop || document.body.scrollTop; if(disTop >= clientHeight){ oBtn.style.display = "block"; }else{ oBtn.style.display = "none"; } } 3、中止滚动查看全部
-
window.onscroll=function() {}//当滚动条发生滚动时触发。 IE识别document.documentElement.scrollTop 谷歌识别document.body.scrollTop 各浏览器兼容写法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 为窗口添加滚动条滚动事件 window.onscroll=function(){}; //在滚动条发生滚动是触发 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器！ 获取滚动高度： chrome:document.body.scrollTop IE:document.documentElement.scrollTop 舍入： Math.floor() 向下舍入取整 Math.ceil() 向上舍入取整查看全部
-
固定位置：position:fixed；图片居中：margin:0 auto; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript 回到顶部效果</title> <!-- <link rel="stylesheet" type="text/css" href="style.css" /> --> <style type="text/css"> #btn { width:40px; height:40px; //固定定位设置 position:fixed; left:50%; margin-left:610px; bottom:30px; background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top; } #btn:hover { background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px; } .box { width:1190px; //实现大图居中 magin:0 auto; } </style> </head> <body> <div class="box"> <img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" /> </div> <a href="javascript:;" id="btn" title="回到顶部"></a> </body> </html>查看全部
-
href="javascript:;"作用是：阻止浏览器默认行为；；；若为空，默认调到顶部 no-repeat背景不平铺 margin-left:610px;计算中间到右边的距离； #btn:hover{}鼠标移上去变化 -40px;因为定位在背景图片的上半部，-40会移到此时背景图片的下半部；+40会移动此时背景图片的上方 position：fixed; left:50%;/页面居中显示/ bottom：定值; margin-left:定值；/在居中的基础上再向右偏离一定的距离/查看全部
-
主要知识点查看全部
-
锚链接 优点： 简单快速、没有兼容性问题 缺点： 视觉上不够直观，用户体验不够好 主要知识点 DOM操作 1.document.getElementById 根据ID获取标签元素 2.document.documentElement.scrollTop 滚动条的数值，可读写 事件运用： 1.window.onload 页面加载完毕后触发 2.onclick 点击后触发 3.window,onscroll 滚动条滚动时触发 定时器(动态效果) 1.setInterval() 设置定时器，需传两个参数 2.clearInterval() 关闭定时器，需传1个参数 拖动是分两种事件 ,一种是自动的定时器执行的 , 还有一种是人鼠标执行的 ,定时器一直执行的是ostop为true ,所以不执行clearInterval动作 , 而人拖动, 也会触发scroll事件 ,这时 ostop就为flase了 就执行clearInterval定时器 加负号是因为speed取整的时候 ,5/6=0.833333;取整为0 ; 也就是最后一次它是执行减去0的 . 而加个负号, 就是-0.833333取整 ,则是-1的 , 即最后一次至少是减去1的 . window.onscroll 滚动条滚动时触发 document.documentELement.scrollTop 滚动条的数值 可读写 1.document.getElementById 根据ID标签获取元素 2.document.documentELement.scrollTop 滚动条的数值 可读写 事件运用： 1.window.onload 页面加载完毕后触发 2.onclick 点击后触发 3.window.onscroll 滚动条滚动时触发查看全部
-
通过锚链接 实现回到顶部效果<a href="#"></a>回到顶部 <a href="#"></a> a链接的href为“#”回到页面最顶部。 <a href="###"></a>a链接的href为“###”没有跳转查看全部
-
知识点查看全部
-
知识点查看全部
举报
0/150
提交
取消