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

2019独角兽企业重金招聘Python工程师标准>>>

// 点击对应的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

点击右侧导航栏，实现iframe嵌入子页面中div，滑动到最上面相关推荐

html导航栏重叠怎么办,请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？...
写了一个头部导航栏的html 想在多个html页面中引用,请问怎么操作? 网上找了用标签实际效果并不好 , 导航栏中按钮下拉菜单无法完全显示请问大牛们平时开发中怎么处理这个的如图 : 可以使用 ...
html5怎么让图片在导航栏后,请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？...
幕布斯7119047 可以使用html的import这个功能通过声明来在页面中包含一个导入具体可以看教程可以向下面这样使用warning.html Warning! This page is un ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
js实现淘宝右侧导航栏功能
本章和大家分享的是模拟淘宝右侧导航栏的一个小功能. 左侧是商品内容,右侧是一个导航栏,当页面向下滚动的时候右侧导航栏也跟着移动. 当黄色内容区域到达顶部的时候,右侧导航栏变为固定的当黑色内容区到达顶 ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...
Android重复点击同一个导航栏失效的解决方案
我是这样解决的: 在setOnNavigationItemSelectedListener 里,也就是每次点击底部导航栏时,判断一下点击的是否是当前界面的导航栏,否才发生跳转. public clas ...
点击按钮之后右侧弹出导航，再点击右侧导航隐藏回去的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自[我是干勾鱼的博客] 实现了一个点击按钮之后右侧弹出导航, ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...

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

点击右侧导航栏，实现iframe嵌入子页面中div，滑动到最上面相关推荐

最新文章

热门文章