-
//本课程script.js源码 window.onload = function(){ var obtn = document.getElementById('btn'); //获取页面可视区的高度 var clientHeight=document.documentElement.clientHeight; var timer = null; var isTop = true; window.onscroll = function(){ // alert(clientHeight); var osTop = document.documentElement.scrollTop || document.body.scrollTop ; if (osTop >= clientHeight){ //显示按钮 obtn.style.display="block"; }else { //隐藏按钮 obtn.style.display="none"; } if (!isTop){ clearInterval(timer); } isTop = false; } obtn.onclick = function(){ //设置定时器 timer = setInterval(function(){ //获取滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop ; var ispeed = Math.floor(-osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed; isTop = true; console.log(osTop -ispeed); if (osTop == 0){ clearInterval(timer); } },30); } }查看全部
-
使用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'; }查看全部
-
window是一个窗口类，onscroll是窗口类window的对象,滚动滚动条时触发查看全部
-
获取滚动条位置 兼容IE document.documentElement.scrollTop 兼容Chrome document.body.scrollTop var ostop=document.documentElement.scrollTop||document.body.scrollTop;//同时兼容查看全部
-
//清除定时器查看全部
-
//代码查看全部
-
//标签获取和事件绑定是经常使用到的 很重要的查看全部
-
body查看全部
-
position:fixed;固定定位查看全部
-
no-repeat背景不平铺 margin-left:610px;计算中间到右边的距离； #btn:hover{}鼠标移上去变化 -40px;因为定位在背景图片的上半部，-40会移到此时背景图片的下半部；+40会移动此时背景图片的上方查看全部
-
href="javascript:;"作用是：阻止浏览器默认行为；；；若为空，默认调到顶部查看全部
-
回到顶部这个效果的重点在定时器和运用事件上查看全部
-
锚链接的优缺点查看全部
-
锚链接返回顶部 <area shape="rect" coords="1,371,116,408" href="#"> 锚链接到标题 <area href="#08" shape="rect" coords="8,294,125,329">查看全部
-
第二种查看全部
举报
0/150
提交
取消