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

回到顶部效果

难度初级
时长40分
学习人数
综合评分9.63
249人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 使用JS实现效果
    查看全部
  • 使用锚链接实现效果的优缺点
    查看全部
  • 锚链接实现定位导航效果
    查看全部
  • 让页面回到顶部的js脚本
    查看全部
  • 页面回到顶部的js脚本
    查看全部
  • top js
    查看全部
  • isTop的逻辑问题: 首先你点击回到顶部时,滚动条开始往回滚,这时候istop为true,因为滚动条滚动触发window.onscroll 事件,!istop为false不执行clearInterval(timer);但是下面的isTop=false;再将isTop置为false。这时候你人为滚动鼠标,则再次触发window.onscroll 事件,此时!istop为true 执行clearInterval(timer);则滚动条停下来
    查看全部
  • 为什么改成负的就能滚到头? 回答这个问题前,先来看下为什么不改成负数就不行呢? 注意这句: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); }
    查看全部
  • 主要知识点
    查看全部
  • @回到顶部效果——2-1 案例实现中相关知识点讲解 置顶操作 DOM操作: 1.document.getElementById();根据ID获取标签元素 2.document.documentElement.scrollTop();滚动条的数值,可读写 事件运用: 1.window.onload 页面加载完毕后触发 2.onclick 点击后触发 3.window.onscroll 滚动条滚动时触发 定时器 1.setInterval() 设置定时器,需传2个参数 2.clearInteval() 关闭定时器,需传1个参数
    查看全部
  • bbb
    查看全部
  • top
    查看全部
  • 1.document.getElementById 2.window.onload//网页加载完成 3.window.onscroll 滚动条滚动时 4.t=setInterval(fun,time) clearInterval(t) 5.scrolltop=document.documentElement.scrollTop || document.body.scrollTop 6.viewHight=document.documentElement.clientHeight||document.body.clientHeight
    查看全部
  • //本课程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); } }
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 我刚试了,MyEclipse新建了一个Web Project 如果在首页上index.jsp这样用,可以回到顶部,其他页面就不行了,为什么?
    查看全部

举报

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

微信扫码,参与3人拼团

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

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