为什么返回顶部按钮不能顺利出现
来源：5-5 首页.UI组件-UiBackTop
weibo_我是LUFFCIER_0
2020-06-14 20:36:05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>城市医院预约平台</title> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/ui.css"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id= "top" class="top"> <div class="wrap"> <p class="call">011-203948764电话预约</p> <p class="welcome">欢迎来到城市服务预约平台 欢迎光临 请 <a href="#">登录</a> <a href="#">注册</a> </p> </div> </div> <div id= "header" class="header"> <div class="wrap clearfix"> <a href="#" class="logo"><img src="./img/logo.png"></a> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#1">科室</a> <a href="#1">疾病</a> <a href="#1">医院</a> </div> <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"> <a href="#" class="ui-search-submit"> </a> </div> </div> </div> <div id= "nav" class="nav"> <div class="wrap"> <div class="link menu">全部科室 <div class="menu-list ui-menu"> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">外科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科大家 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> </div> </div> <a href="#" class="link">按医院挂号</a> <a href="#" class="link">按科室挂号</a> <a href="#" class="link">按疾病挂号</a> <a href="#" class="link">最新公告</a> <a href="#" class="link right">社会知名医院</a> </div> </div> <div id= "banner" class="banner"> <div class="banner-slider ui-slider"> <div class="ui-slider-wrap"> <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a> <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a> <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a> </div> <div class="ui-slider-arrow"> <a href="#l" class="item left"> </a> <a href="#r" class="item right"> </a> </div> <div class="ui-slider-process"> <a href="" class="item item_focus"> </a> <a href="" class="item"> </a> <a href="" class="item"> </a> </div> </div> <div class="banner-search"> <div class="caption"> <span class="text">快速预约</span> </div> <div class="form"> <div class="line"><select name="area"><option>医院地区</option></select></div> <div class="line"><select name="level"><option>医院等级</option></select></div> <div class="line"><select name="name"><option>医院名称</option></select></div> <div class="line"><select name="department"><option>医院科室</option></select></div> </div> <div class="submit"> <input class="button" type="button" value="快速查询"> </div> </div> <div class="banner-help"> <div class="caption"> <span class="text">帮助中心</span> </div> <div class="list"> <a href="#" class="link">账号指南</a> <a href="#" class="link">预约指南</a> <a href="#" class="link">账号找回</a> <a href="#" class="link">常见问题</a> </div> </div> </div> <div id= "content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <div class="caption"> <a href="" class="item item_focus">医院</a> <a href="" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="#" class="block-caption-item block-caption-item_focus">全部</a> <a href="#" class="block-caption-item">东城区</a> <a href="#" class="block-caption-item">西城区</a> <a href="#" class="block-caption-item">朝阳区</a> <a href="#" class="block-caption-item">海淀区</a> <a href="#" class="block-caption-item">禅城区</a> </div> <div class="block-content"> <div class="block-wrap"> <div class="block-list clearfix"> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> </div> <div class="block-text-list clearfix"> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> </div> <a href="#" class="block-more">更多医院</a> </div> <div class="block-wrap" style="display: none;"> 其他城区</div> </div> </div> <div class="item" style="display: none;">科室内容</div> </div> </div> <div class="content-news"> <div class="caption">最新公告 <a href="#" class="more">更多</a></div> <div class="list"> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> </div> </div> <div class="content-close"> <div class="caption">停诊公告 <a href="#" class="more">更多</a></div> <div class="list"> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> </div> </div> </div> </div> <div id= "footer" class="footer"> </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
.ui-search{
background: url(../img/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
}
.ui-search-select-list{
width: 67px;
line-height: 24px;
position: absolute;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2)
left:2px;
top: 36px;
z-index: 2px;
display: none;
}
.ui-search-select-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
left: 71px;
top:5px;
line-height: 26px;
}
.ui-search-submit{
display: block;
position: absolute;
right:0px;
top:1px;
line-height: 26px;
width: 40px;
height: 36px;
}
.ui-menu{}
.ui-menu-item{
height: 22px;
line-height: 22px;
padding:8px 5px 9px 6px;
margin-left: 0px;
}
.ui-menu-item-detail{
display: none;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left: 20px;
font-size: 14px;
color: #fff;
}
.ui-menu-item-department:before{
content: ' ';
display: block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top:1px;
background: url('../img/icon-menu.jpg') -22px 0 no-repeat;
}
.ui-menu-item-disease{
float:right;
padding-left: 5px;
font-size: 12px;
color: #d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #333;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position: 0 0;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item-detail{
position: absolute;
width:500px;
height: 392px;
padding: 20px 10px 10px 29px;
background: #fff url(../img/bg-menu.jpg) center no-repeat;
top: 0;
left: 190px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1)
}
.ui-menu-item-detail-group{
padding-bottom: 30px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
width: 100%;
height: 34px;
line-height: 34px;
color: #666;
font-size: 16px;
font-weight: bold;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color: #868686;
margin-right: 12px;
font-size: 12px;
padding-bottom: 5px;
}
.ui-menu-item-detail-group-list a:after{
content: '|';
color: #ddd;
padding-left: 12px;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
background-position-y:-22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
background-position-y:-44px;
}
.ui-menu-item:nth-child(4) .ui-menu-item-department:before{
background-position-y:-66px;
}
.ui-backTop{
display: none;
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-slider{
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap{
width:99999px;
height: 414px;
position: absolute;
left: 0;
right: 0;
transition: all .5s;
}
.ui-slider-wrap .item{
display: block;
float: left;
width: 544px;
height: 414px;
}
.ui-slider-arrow{
width: 544px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
background:url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
left: 0;
}
.ui-slider-arrow .right{
right: 0;
background-position: -40px 0;
}
.ui-slider-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slider-process .item{
display: inline-block;
width: 16px;
height: 16px;
background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
background-position: -23px 0;
}
$.fn.UiSearch=function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
});
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected').text( $(this).text() );
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
$.fn.UiTab=function(header,content,focus_pre){
var ui = $(this);
var tabs = $(header,ui);
var cons = $(content,ui);
var focus_pre = focus_pre || '';
tabs.on('click',function(){
var index=$(this).index();
tabs.removeClass(focus_pre+'item_focus').eq(index).addClass(focus_pre+'item_focus');
cons.hide().eq(index).show();
return false;
})
}
$.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=$('body').scrollTop();
if(top > windowHeight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
});
}
$.fn.UiSlider = function(){
var ui = $(this);
var items = $('.ui-slider-wrap .item',ui);
var btn_prev = $('.ui-slider-arrow .left',ui);
var btn_next = $('.ui-slider-arrow .right',ui);
var tips = $('.ui-slide-process .item',ui);
var current = 0;
var size = items.size();
var width = items.eq(0).width();
wrap.on('move_prev',function(){
})
.on('move_next',function(){
})
.on('move_to',function(evt,index){
wrap.css('left',index*width*-1)
});
btn_prev.on('click',function(){
wrap.triggerHandler('move_prev');
});
btn_next.on('click',function(){
wrap.triggerHandler('move_next');
});
tips.on('click',function(){
var index=$(this).index();
wrap.triggerHandler('move_to',index);
});
}
$(function(){
$('.ui-search').UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');
$('body').UiBackTop();
$('.ui-slider').UiSlider();
});写回答
4回答
-
好帮手慕星星
2020-06-17
同学你好，代码中报错如下
这是引入jquery高版本的问题。size()方法从jQuery 1.8开始被废弃。使用.length属性代替。
如果同学测试也是这个错误的话，建议这里修改一下
修改之后就没有问题了
自己再测试下，祝学习愉快！
0 -
weibo_我是LUFFCIER_0
提问者
2020-06-16
$.fn.UiSearch=function(){ var ui = $(this); $('.ui-search-selected',ui).on('click',function(){ $('.ui-search-select-list').show(); return false; }); $('.ui-search-select-list a',ui).on('click',function(){ $('.ui-search-selected').text( $(this).text() ); $('.ui-search-select-list').hide(); return false; }); $('body').on('click',function(){ $('.ui-search-select-list').hide(); }) } $.fn.UiTab=function(header,content,focus_pre){ var ui = $(this); var tabs = $(header,ui); var cons = $(content,ui); var focus_pre = focus_pre || ''; tabs.on('click',function(){ var index=$(this).index(); tabs.removeClass(focus_pre+'item_focus').eq(index).addClass(focus_pre+'item_focus'); cons.hide().eq(index).show(); return false; }) } $.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(); } }); el.on('click',function(){ $(window).scrollTop(0); }); } $.fn.UiSlider = function(){ var ui = $(this); var items = $('.ui-slider-wrap .item',ui); var wrap= $('.ui-slider-wrap'); var btn_prev = $('.ui-slider-arrow .left',ui); var btn_next = $('.ui-slider-arrow .right',ui); var tips = $('.ui-slide-process .item',ui); var current = 0; var size = items.size(); var width = items.eq(0).width(); wrap.on('move_prev',function(){ }) .on('move_next',function(){ }) .on('move_to',function(evt,index){ wrap.css('left',index*width*-1) }); btn_prev.on('click',function(){ wrap.triggerHandler('move_prev'); }); btn_next.on('click',function(){ wrap.triggerHandler('move_next'); }); tips.on('click',function(){ var index=$(this).index(); wrap.triggerHandler('move_to',index); }); } $(function(){ $('.ui-search').UiSearch(); $('.content-tab').UiTab('.caption > .item','.block > .item'); $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-'); $('body').UiBackTop(); $('.ui-slider').UiSlider(); });0 -
好帮手慕星星
2020-06-16
同学你好，建议将自己修改后的js代码粘贴上来，老师帮助测试，便于帮助解决。
祝学习愉快！
0h020-06-16 -
好帮手慕星星
2020-06-15
同学你好，代码中问题如下：
1、打开代码控制台中报错：wrap变量未定义
从报错位置去找是因为wrap变量未定义就直接使用了。需要提前获取元素，参考
2、页面滚动按钮不能出现，可以输出滚动的高度是否获取到了
输出结果都是0
存在兼容性问题，元素中可以添加html，参考
自己再测试下，祝学习愉快！
0h020-06-15
相似问题