我感觉代码逻辑没错,但是为什么滚动鼠标时候,是隐藏呢?

我感觉代码逻辑没错,但是为什么滚动鼠标时候,是隐藏呢?

# 具体遇到的问题
老师,为什么我拉滚动条,网页是显示隐藏呢?

我尝试打印窗口高度,有700多,但是我滚动条拖到底,才517.

老师,为什么我代码这样呢?
# 报错信息的截图
http://img1.sycdn.imooc.com//climg/5fc755c8092c7abf18730870.jpg

#我尝试解决

http://img1.sycdn.imooc.com//climg/5fc758b5098f4d5216990508.jpg

http://img1.sycdn.imooc.com//climg/5fc758d509e723c018360647.jpg

// UiBackTop

$.fn.UiBackTop = function(){

    var ui = $(this);

    var el = $('<a class="ui-backtop" href="#0"></a>');

    ui.append(el);

    var windowHeight = $(window).height();


    $(window).on('scroll',function(){

       var top = $('html,body').scrollTop();

       if(top > windowHeight){

           el.show();

       }else{el.hide();}

    });

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕久久 2020-12-03 09:44:54

同学你好,问题解答如下:

1、什么时候出现“回到顶部”,是由if中的条件决定的。如果同学想让“回到顶部”早点出现,那么可以更改下条件,比如:

http://img1.sycdn.imooc.com//climg/5fc83ffd091c0ff204770229.jpg

http://img1.sycdn.imooc.com//climg/5fc840160985a70a07350391.jpg

效果如下:

http://img1.sycdn.imooc.com//climg/5fc8417e0a04fc9b12970937.jpg

由于当前页面内容很少,所以“返回顶部”的功能不是很好测试(页面长度不够),所以之前让同学给body设置一个很大的高度,目的就是为了模拟页面内容很多的情形(页面很长),因为只有页面内容很多时,才需要使用“返回顶部”。同学可以不用关注页面效果,只要能测试“返回顶部”即可。

2、源码的确存在同学说的这个问题,因为源码中,多了一个返回顶部的html结构:
http://img1.sycdn.imooc.com//climg/5fc841a2094c7d3d07600432.jpg

所以页面刚打开,就能看到“返回顶部”,它就是html结构中多余的那个,并且它不受js的控制。建议将它删除,然后将if条件改成top>50试试。

如果还有问题,可以新建一个问题,把修改后的代码粘贴出来,老师用新的代码测试,并为你解答。

祝学习愉快!

好帮手慕久久 2020-12-02 17:29:15

同学你好,问题解答如下:

1、代码没有写错

2、之所以会隐藏,是因为if (top > windowHeight) 这个条件不满足,所以会执行el.hide()这句代码,让a隐藏。具体如下:

top值实际获取的是页面滚过去的距离,如下:

http://img1.sycdn.imooc.com//climg/5fc75d04098d351203710525.jpg

所以当窗口高度是700多时,滚动条滚到底,top值可能是500多。当页面滚动到底时,top值等于页面的总高度-窗口的总高度(下图粉箭头):

http://img1.sycdn.imooc.com//climg/5fc75dce09ccf99903790517.jpg

3、建议同学给body的高度设置大点,效果就正常了:

http://img1.sycdn.imooc.com//climg/5fc75e4609e1d45805270296.jpg

http://img1.sycdn.imooc.com//climg/5fc75e28092a6e3408450409.jpg

祝学习愉快!

  • 提问者 慕用6222994 #1

    老师,不行呀,这个页面都滚动到footer才出现回到顶部。这个我们要实现的目标不一样呀。

    2020-12-02 22:29:52
  • 提问者 慕用6222994 #2

    还有,老师的代码,我用浏览器打开,一直显示回到顶部。下面是老师代码打开的网页。我的代码是照着老师的代码敲得,为什么我的就成这样了呢?

    http://img1.sycdn.imooc.com//climg/5fc7a5f5091dbb8018980878.jpg

    2020-12-02 22:35:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师