为了账号安全,请及时绑定邮箱和手机立即绑定

回到顶部效果

难度初级
时长40分
学习人数
综合评分9.63
249人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • href="javascript:;"作用是:阻止浏览器默认行为;;;若为空,默认调到顶部 margin-left:610px;计算中间到右边的距离; #btn:hover{}鼠标移上去变化 -40px;因为定位在背景图片的上半部,-40会移到此时背景图片的下半部;+40会移动此时背景图片的上方 [ 查看全文 ]
    查看全部
  • position:fixed固定位置
    查看全部
  • 知识点
    查看全部
  • 获取滚动条滚动的高度(兼容性处理): var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    查看全部
  • 知识点
    查看全部
  • 获取滚动条滚动的高度(兼容性处理): var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    查看全部
  • 知识点
    查看全部
  • 那个滚动条监视有bug
    查看全部
  • 返回顶部效果
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-27

  • 为什么改成负的就能滚到头? 回答这个问题前,先来看下为什么不改成负数就不行呢? 注意这句: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); }
    查看全部
  • 锚链接 优点: 简单快速、没有兼容性问题 缺点: 视觉上不够直观,用户体验不够好 主要知识点 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的 .
    查看全部
  • 使用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'; }
    查看全部
  • href="javascript:;"作用是:阻止浏览器默认行为;;;若为空,默认调到顶部 no-repeat背景不平铺 margin-left:610px;计算中间到右边的距离; #btn:hover{}鼠标移上去变化 -40px;因为定位在背景图片的上半部,-40会移到此时背景图片的下半部;+40会移动此时背景图片的上方
    查看全部
  • 锚链接 优点: 简单快速、没有兼容性问题 缺点: 视觉上不够直观,用户体验不够好 主要知识点 DOM操作 1.document.getElementById 根据ID获取标签元素 2.document.documentElement.scrollTop 滚动条的数值,可读写 事件运用: 1.window.onload 页面加载完毕后触发 2.onclick 点击后触发 3.window,onscroll 滚动条滚动时触发 定时器 1.setInterval() 设置定时器,需传两个参数 2.clearInterval() 关闭定时器,需传1个参数
    查看全部
  • 正确代码
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-22

举报

0/150
提交
取消
课程须知
1.掌握HTML+CSS基础知识;2.了解JavaScript中onclick事件、简单dom操作、定时器等知识。
老师告诉你能学到什么?
1.掌握两种实现顶部效果的方法; 2.学会定时器、window.onscroll等知识

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!