-
阻止a标签默认效果： <a>中的【href="javascript:;"】：阻止<a>标签默认回到顶部的行为。查看全部
-
案例实现主要知识点：查看全部
-
锚链接的优点和缺点：查看全部
-
锚链接： <a href="#">默认回到顶部查看全部
-
锚链接： 优点：简单快速、没有兼容性问题 缺点：视觉上不够直观，用户体验不够好查看全部
-
锚链接： <a href="#"></a> a链接的href为“#”回到页面最顶部。查看全部
-
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、中止滚动查看全部
-
清除定时器的时候要确保滚动条已经彻底到达顶部： 将速度设置为负值。iSpeed = Math.floor(-disTop / 5);查看全部
-
获取浏览器可视区域的高度：document.documentElement.clientHeight查看全部
-
【获取滚动条位置】浏览器兼容 【IE】 document.documentElement.scrollTop 【Chrome】 document.body.scrollTop查看全部
-
<a>中的【href="javascript:;"】的作用是：阻止<a>标签的浏览器默认行为。查看全部
-
window.onload = function() { var obtn = document.getElementById("btn"); var timer = null; var isTop = true; //滚动条滚动时触发 window.onscroll = function() { if (!isTop) { clearInterval(timer); } isTop = false; } obtn.onclick = function() { //设置定时器 timer = setInterval(function() { //获取滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop/5); document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed; isTop = true; console.log(osTop-ispeed); if (osTop == 0) { clearInterval(timer); } },30); } }查看全部
-
document.documentElement.clientHeight 获取页面可视区的高度查看全部
-
谷歌浏览器查看绑定的事件在elements-> eventlisteners 获取滑条距顶端距离 谷歌不支持document.documentElement.scrollTop document.body.scrollTop查看全部
-
JavaScript实现回到顶部查看全部
举报
0/150
提交
取消