当前位置：首页 > Web前端 > HTML

单页官网-平滑过渡到锚点

时间：2023-04-02 16:16:20 HTML

特点单页官网--不是传说中的单页应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点，导航会随之切换。例如：考拉微类HTML布局

Features

产品中心

展示

服务与支持

联系我们

111111

22222

3333334444455555footerCSS样式导航栏的样式应该是注意这里为当前样式创建一个单独的DIV层，绝对定位，其中导航的鼠标移动到,当前样式层移动到导航菜单。JS方法封装了JS部分，封装了一个插件navScroll.js/*NavScroll插件参数：*navBox：导航栏*navA：导航列表，嵌套在一个带有锚点的标签内*navFocus：当前状态ofthenavigationlist*className:classNameinthecurrentstateofnavigationlist**/functionnavScroll(navBox,navA,navFocus,className){/*设置当前样式的宽度和位置，初始为第一个导航的位置*/变量索引=0;//初始设置当前索引为0var$sW=navA.eq(index).outerWidth();var$sL=navA.eq(index).position().left;navFocus.css({宽度：$sW，左：$sL});curClass(navA.eq(index));/*鼠标移入导航栏改变当前样式*/navA.mouseenter(function(){curClass($(this));navFocusMove($(this));});//当鼠标离开导航栏时，当前样式回到上次位置navBox.mouseleave(function(){navFocus.stop().animate({width:$sW,left:$sL},function(){/*将当前样式添加到最后一个导航*/curClass(navA.eq(index))})});/*滚动到某个部分改变导航的样式*/$(document).on('scroll',function(){vardocTop=$(document).scrollTop()+100,offsetTop=[];for(vari=0,length=navA.length;i=offsetTop[i]){curNav(navA.eq(i));curClass(navA.eq(i));navFocusMove(navA.eq(i))}}});/*点击导航时改变导航样式，文档平滑滚动到指定位置*/navA.click(function(){curNav($(this));curClass($(this));navFocusMove($(this));$("html,body").animate({/*根据一个标签href转换为ID选择器得到对应位置*/scrollTop:$($(this).attr("href").offset().top-100+"px"},{duration:500,easing:"swing"});返回假；});//当前样式移动函数functionnavFocusMove(that){navFocus.stop().animate({width:that.outerWidth(),left:that.position().left})}//添加当前样式,删除其他当前样式functioncurClass(curnavA){curnavA.addClass(className).parent().siblings().find('a').移除类（类名）；}/*记录上一次当前样式的位置*/functioncurNav(obj){$sW=obj.outerWidth();$sL=obj.position().left;index=obj.parent().index();}//调整窗口大小时设置当前导航样式$(window).resize(function(){var$sW=navA.eq(index).outerWidth();var$sL=navA.eq(index).position().left;navFocus.css({width:$sW,left:$sL});})}JS方法调用在页面中调用引用JQ库和这个navScroll.js插件<script>$(function(){//获取重要节点var$header=$('#header'),$nav=$header.find('.nav'),$nava=$nav.find('li>a'),$navFocus=$nav.find('.nav_focus');navScroll($nav,$nava,$navFocus,'cur');})刚学完js的小白，这个思路都在评论里，不懂的请留言，不喜勿喷，欢迎指正！完整案例

上一篇：React项目开发教程概览

下一篇：6GEN715–计算机绘图

单页官网-平滑过渡到锚点相关文章