赞
踩
最近一直在弄页面的事情,对页面方面的知识又巩固了一下。这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言!
js部分
//标题对象
var title = document.getElementById("title");
//菜单对象
var menu = document.getElementById("menu");
//正文对象
var content = document.getElementById("content");
//当前标题据顶部高度
var titleTop = title.offsetTop;
//当前标题高度
var titleHeight = title.offsetHeight;//导航栏随页面滚动而水平切换
window.onscroll = function(){};
//点击菜单跳转到指定位置
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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。