js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
2018-04-04 11:34
1481 查看
最近一直在弄页面的事情,对页面方面的知识又巩固了一下。这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言!
js部分
//标题对象
var title = document.getElementById("title");
//菜单对象
var menu = document.getElementById("menu");
//正文对象
var content = document.getElementById("content");
//当前标题据顶部高度
var titleTop = title.offsetTop;
//当前标题高度
var titleHeight = title.offsetHeight;
//对象子节点
var contentChild = content.children;
//菜单子节点
var menuChild = menu.children;
//导航栏随页面滚动而水平切换
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
for(var i=0;i<menuChild.length;i++){
if( scrollTop + titleHeight >= contentChild[i].offsetTop){
for(var j=0;j<menuChild.length;j++){
menuChild[j].className = "";
}
menuChild[i].className = "cur";
}
}
};
//点击菜单跳转到指定位置
function menuChange(menuType){
//定义id
var menuTypeId;
switch(menuType){
case 0:
menuTypeId = "#home";
break;
case 1:
menuTypeId ="#tech";
break;
case 2:
menuTypeId ="#innovate";
break;
case 3:
menuTypeId ="#gain";
break;
case 4:
menuTypeId ="#economics";
break;
case 5:
menuTypeId ="#link";
break;
default:
menuTypeId ="#home";
break;
}
$("html, body").animate({
scrollTop: $(menuTypeId).offset().top- titleHeight}, {duration: 500,easing: "swing"
});//scrollTop:指定相关模块回到指定位置(该位置要去掉菜单导航栏高度)。
};
页面部分:
<ul class="menu" id="menu">
<li class="cur"><div onclick="menuChange(0)">KL介绍</div></li>
<li><div onclick="menuChange(1)">技术属性</div></li>
<li><div onclick="menuChange(2)">项目创新</div></li>
<li><div onclick="menuChange(3)">盈利模式</div></li>
<li><div onclick="menuChange(4)">经济模式</div></li>
<li><div onclick="menuChange(5)">联系我们</div></li>
</ul>
<div>
<div id="#home"></div>
<div id="#tech"></div>
<div id="#innovate"></div>
<div id="#gain"></div>
<div id="#economics"></div>
<div id="#link"></div>
</div>
<div id="#home"></div>
js部分
//标题对象
var title = document.getElementById("title");
//菜单对象
var menu = document.getElementById("menu");
//正文对象
var content = document.getElementById("content");
//当前标题据顶部高度
var titleTop = title.offsetTop;
//当前标题高度
var titleHeight = title.offsetHeight;
//对象子节点
var contentChild = content.children;
//菜单子节点
var menuChild = menu.children;
//导航栏随页面滚动而水平切换
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
for(var i=0;i<menuChild.length;i++){
if( scrollTop + titleHeight >= contentChild[i].offsetTop){
for(var j=0;j<menuChild.length;j++){
menuChild[j].className = "";
}
menuChild[i].className = "cur";
}
}
};
//点击菜单跳转到指定位置
function menuChange(menuType){
//定义id
var menuTypeId;
switch(menuType){
case 0:
menuTypeId = "#home";
break;
case 1:
menuTypeId ="#tech";
break;
case 2:
menuTypeId ="#innovate";
break;
case 3:
menuTypeId ="#gain";
break;
case 4:
menuTypeId ="#economics";
break;
case 5:
menuTypeId ="#link";
break;
default:
menuTypeId ="#home";
break;
}
$("html, body").animate({
scrollTop: $(menuTypeId).offset().top- titleHeight}, {duration: 500,easing: "swing"
});//scrollTop:指定相关模块回到指定位置(该位置要去掉菜单导航栏高度)。
};
页面部分:
<ul class="menu" id="menu">
<li class="cur"><div onclick="menuChange(0)">KL介绍</div></li>
<li><div onclick="menuChange(1)">技术属性</div></li>
<li><div onclick="menuChange(2)">项目创新</div></li>
<li><div onclick="menuChange(3)">盈利模式</div></li>
<li><div onclick="menuChange(4)">经济模式</div></li>
<li><div onclick="menuChange(5)">联系我们</div></li>
</ul>
<div>
<div id="#home"></div>
<div id="#tech"></div>
<div id="#innovate"></div>
<div id="#gain"></div>
<div id="#economics"></div>
<div id="#link"></div>
</div>
<div id="#home"></div>
相关文章推荐
- js,jquery滚动/跳转页面到指定位置的实现思路
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- js,jquery滚动/跳转页面到指定位置的实现思路
- js实现点击导航栏之后页面滚动
- js,jquery滚动/跳转页面到指定位置
- js点击返回跳转到指定页面实现过程
- JS实现点击导航栏之后页面滚动
- js 滚动/跳转页面到指定位置
- jquery滚动/跳转页面到指定位置的实现思路
- 个人笔记 js 14 js实现点击单元格行跳转链接到指定页面
- HTML+JS之点击按钮滚动到页面指定位置
- js练习之事件切换图片和控制css样式以及指定页面滚动位置
- Jquery 实现点击一个页面跳转后在另外一个页面显示指定位置
- js点击返回跳转到指定页面实现过程
- HTML实现跳转到页面指定位置
- html页面实现指定位置的跳转
- JavaScript实现页面到滚动到指定位置执行某些操作
- 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码