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

回到顶部效果

难度初级
时长40分
学习人数
综合评分9.63
249人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
!!!为什么var ostop=document.documentElement.scrollTop||document.body.scrollTop;这样一个DOM定义会触发window.onscroll事件?我把istop= true;放在这条语句前就失败,但放在它后面则没问题,放前面失败很显然,因为没有onscroll操作,但为什么不放在document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;这句后面也能成功???

已采纳回答 / 只会补丁的小布丁
因为滚动条的值不是固定的,需要更新
请教一下,为什么直接用osTop-=50这样写没有效果的?

已采纳回答 / 前端_小小白
这里的速度的意思就是当前位置和top为0的的差, 所以高度减每一次求到的速度就可以得到一个变速的效果,你也可以去看一下这个课程http://www.imooc.com/learn/167
把margin-left:610px;改小一点就看到了,另外下载的源码里面#btn里面多了一个display:none;结果能显示才有鬼。
感谢老师分享
还以为网站疯了 哈哈....
看了评论不想学了,,,推荐WingMeng的,可避免兼容问题
$("#btn").click(function(){

$("html,body").animate({scrollTop:0},300);

});
我想应该是这样的,当点击按钮滚到顶部,这一个过程,一直在执行onclick 和onscroll 这两事件;当还没有上到顶部的时候,滚动鼠标,onclick的的事情触发的没有onsroll事件快,所以在 onclick事件里面的让istop还没有来得及赋值,然后就连续执行了两次onscroll ,第一次是把本来是真的取反,变为false走else 然后第二次把假的再去反就变为真了就执行清除clearIterval() 这个方法,让鼠标事件里面的定时器停止了,;我是這么认为的;
我的实现demo,兼容各种浏览器http://www.yaolin.win/exercise/backtop/

已采纳回答 / 春双子大哥
代码有问题:你的<style>..........</style>写错了!你写成<style/>了
用的火狐浏览器,不兼容,var osTop = document.documentElement.scrollTop || document.body.scrollTop;值还是0,怎么解决啊
关于图片不显示,老师给#btn加个了display:none;表示不显示在文档当中,去掉就会出现了
课程须知
1.掌握HTML+CSS基础知识;2.了解JavaScript中onclick事件、简单dom操作、定时器等知识。
老师告诉你能学到什么?
1.掌握两种实现顶部效果的方法; 2.学会定时器、window.onscroll等知识

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消