老师你这个回到顶部有问题啊

老师你这个回到顶部有问题啊

加载时 会出现回到顶部的图片 但是只要滚动后 就会消失不见 得重新刷新才会出现回到顶部的样式

你视频里也是这样的 

而且最开始就回到顶部 写为 display:none 那么不管怎么滚动都不会出现 “回到顶部”

ui.css部分

/* 回到顶部 */

.ui-backTop{

display: block;

position: fixed;

right: 2px;

bottom: 2px;

z-index: 9;

width: 40px;

height: 40px;

color: #fff;

background: rgba(102,102,102,.9) url("../img/icon-go-up.png") center no-repeat;

}

.ui-backTop:hover{

background: rgba(102,102,102,.9);

}

.ui-backTop:hover:after{

content: "回到顶部";

display: block;

line-height: 20px;

text-align: center;

}


ui.js部分

// ui-backTop 回到顶部

$.fn.UiBackTop=function(){

var ui = $(this);

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

ui.append(el);//在bod后追加一个a标签

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

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

var top=$("body").scrollTop();// 获取滚动的高度

if(top>windowHeight){

el.show();

}else{

el.hide();

}

});

el.on("click",function(){

$(window).scrollTop(0);

})


}


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

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

2回答
好帮手慕慕子 2020-07-16 19:20:51

同学你好,只有部分代码,无法进行测试,建议:将你写的完整代码(包括html、css、js)全部粘贴过来,老师帮助同学测试下,准确的定位与解决问题。

祝学习愉快~

提问者 慕标5156652 2020-07-16 17:52:04

老师 我发现 是因为你在视频里是这样写的

ui.js     

var top=$("body").scrollTop();// 获取滚动的高度

就会出现我提问的那个错误 

但是我这样写之后

var top=$("html,body").scrollTop();// 获取滚动的高度

就会出现效果 这个是什么原因呢


  • 提问者 慕标5156652 #1
    ui.css部分 /* 回到顶部 */ .ui-backTop{ display: block; position: fixed; right: 2px; bottom: 2px; z-index: 9; width: 40px; height: 40px; color: #fff; background: rgba(102,102,102,.9) url("../img/icon-go-up.png") center no-repeat; } .ui-backTop:hover{ background: rgba(102,102,102,.9); } .ui-backTop:hover:after{ content: "回到顶部"; display: block; line-height: 20px; text-align: center; } 我又发现不管 display:none 还是 display:block 对效果都没有影响
    2020-07-16 17:57:17
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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