点击右侧导航栏,实现iframe嵌入子页面中div,滑动到最上面

// 点击对应的nav里的li标签,页面就滚动到哪里
$('.title-list > li').click(function(event) {
    $(this).addClass('active').siblings().removeClass('active');
    //li标签里面有a标签,可以阻止到a标签的默认行为
    event.preventDefault(); //这里找到的是target #后面的内容
    var target = $(this).find('a').prop('hash'); //将页面动画滚动到指定位置
    var scroll_top = $("#ueditor_0").contents().find("body").find(target).offset();
    var s = scroll_top.top;
    $('html, body').animate({
        scrollTop: s
    }, 500);
}); //页面滚动到哪,对应的nav里的li就高亮

$(window).on('scroll',function(){ //获取页面滚动高度
    var pageScrollTop = $('html,body').scrollTop();
    $('.title-list > li ').each(function(index,ele){
        if(index == $('.title-list > li ').length - 1)  { return; }
        var target = $(this).find('a').prop('hash');
     if($(target).offset().top - pageScrollTop < 0) {
        $(this).parent('li').siblings().removeClass('active');
        $(this).parent('li').addClass('active'); };
    });
});

转载于:https://my.oschina.net/u/2376927/blog/2991351

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值