效果无法实现

效果无法实现

// ui-search定义
$.fn.UiSearch=function(){
    var ui=$(this);
    $('.ui-search-selected',ui).on('click',function(){
        $('.ui-search-select-list').show();
        console.log(1);
        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();
    })
}

// ui-tab 定义

/**
 * @param {string} hearder TAB组件  所有选项卡 item
 * @param {string} content TAB组件的内容区域 所有item
 * @param {string} focus_prefix 选项卡高亮样式前缀
 */

$.fn.UiTab=function(header,content,focus_prefix){
    var ui=$(this);
    var tabs=$(header,ui);
    var cons=$(content,ui);
    var focus_prefix=focus_prefix||'';
    
    tabs.on('click',function(){
        var index=$(this).index();
        tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
        cons.hide().eq(index).show();
        return false;
    })
}

//ui-backTop
 $.fn.UiBackTop=function(){
     var ui=$(this);
     var el=$('<a class="ui-backTop" href="#"></a>');
     ui.append(el);
     var windowHeight=$(window).height();
     $(window).on('scroll',function(){
         var top=parseInt($('body').scrollTop());
         if(top>windowHeight){
             el.show();
             console.log(1);
         }else{
             el.hide();
             console.log(2);
         }
     })
     el.on('click',function(){
         $(window).scrollTop(0);
     })
 }



// 页面的脚本逻辑

$(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();
})

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


老师你好,我的返回顶部在hbuildx中可以实现,但是在火狐谷歌浏览器中就不行了,返回顶部的小图标不会出现,我给代码中加了console.log(),2可以打印出来,但是1始终不行

正在回答

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

2回答

同学你好,这个问题已经在另一个问答里面进行了回复,链接:

http://class.imooc.com/course/qadetail/99338

祝学习愉快!

山河远阔ZZ 2019-03-14 16:27:37

同学你好,经过测试,在火狐跟谷歌浏览器中,返回顶部的效果都是可以实现的哦。

在代码中通过body获取出来的top值为0,0>windowHeight,条件不成立,所以在控制台中,一直出现的是数字2,如下:

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

并且在html中已经存在了一个a标签,在通过js往html添加了一个a标签,导致这两个a标签重叠了,如下:

http://img1.sycdn.imooc.com//climg/5c8a106000017c2f08670080.jpghttp://img1.sycdn.imooc.com//climg/5c8a107200017b5d07680099.jpg

祝学习愉快!

  • 提问者 光aaaaand影 #1
    此网站似乎使用 scroll-linked 定位效果。这可能无法与异步平移一起使用;参见 https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 详细了解,也可加入我们一起讨论相关的工具和功能! 老师,我按您的指示做了改正,我的HTML结构中并没有a标签,以上是火狐控制台给出的⚠,我试着打印top和windowHeight,即使滚动条滚到底部,windowHeight也小于top,最后效果还是没有
    2019-03-14 16:46:37
  • 提问者 光aaaaand影 #2
    另外,我将火狐的控制台打开,效果可以实现,可一旦关掉控制台,就不行了
    2019-03-14 16:48:41
  • 山河远阔ZZ 回复 提问者 光aaaaand影 #3
    同学你好,建议你把你的html代码和css样式都粘贴上来,老师根据你的html布局和css代码来进行差错。
    2019-03-14 16:49:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

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

在线咨询

领取优惠

免费试听

领取大纲

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