html导航栏页面切换的js,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

if( scrollTop + titleHeight >= contentChild[i].offsetTop){

for(var j=0;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:指定相关模块回到指定位置(该位置要去掉菜单导航栏高度)。

};

页面部分：

KL介绍

技术属性

项目创新

盈利模式

经济模式

联系我们

html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...相关推荐

js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
Vue 页面跳转到指定位置
Vue 页面跳转到指定位置页面跳转页面 script style 进阶版:随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面 <template><div ...
uniapp通过点击事件click跳转到指定页面
通过点击某个事件跳转到指定页面首先给个点击事件设置个名字再给给它写个跳转函数navigateTo即可函数要写在方法里 <view class="nav">< ...
js 跳转到指定位置高德地图_JS控制div跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: div1 div2 ...
js 跳转到指定位置高德地图_【高德字符串JavaScript面试题】面试问题：高德地图Js … - 看准网...
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器在页面body里你想展示地图的地方创建一个 ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
js 跳转到指定位置高德地图_在H5页面内通过地址调起高德地图实现导航
项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...
js 跳转到指定位置高德地图_JS引入高德地图定位
在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery) 2准备工作(封装方法,以便直接调用) -2.2封装超时方法($.timeOut-参考) -2.3封装异步调用地图的方法 / ...
js 跳转到指定位置高德地图_第三方高德地图Javascript API
1. 申请JSAPI的开发者Key : http://lbs.amap.com/dev/key 2. 引入高德地图JSAPI文件: AMap.Scale // 地图的比例因子 / ...

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

html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...相关推荐

最新文章

热门文章