1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > js实现页面滚动切换导航栏/点击导航栏跳转到指定位置

js实现页面滚动切换导航栏/点击导航栏跳转到指定位置

时间:2023-01-19 14:16:47

相关推荐

js实现页面滚动切换导航栏/点击导航栏跳转到指定位置

最近一直在弄页面的事情,对页面方面的知识又巩固了一下。这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言!

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 οnclick="menuChange(0)">KL介绍</div></li>

<li><div οnclick="menuChange(1)">技术属性</div></li>

<li><div οnclick="menuChange(2)">项目创新</div></li>

<li><div οnclick="menuChange(3)">盈利模式</div></li>

<li><div οnclick="menuChange(4)">经济模式</div></li>

<li><div οnclick="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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。