索鸟网

  1. 首页
  2. 单页面官网-平滑过渡到指的锚点

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


单页面官网--不是传说中的单页面应用!
顶部固定,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换
HTML布局如下

<!--顶部导航栏-->
<div  id="header">
    <ul class="nav">
        <li><a href="#con_1">Features</a></li>
        <li><a href="#con_2">Product Center</a></li>
        <li><a href="#con_3">Showcase</a></li>
        <li><a href="#con_4">Service & Support</a></li>
        <li><a href="#con_5">Contact Us</a></li>
        <div class="nav_focus"></div>
    </ul>
</div>
<!--内容区-->
<div class="container">
    <div id="con_1">111111</div>
    <div id="con_2">22222</div>
    <div id="con_3">333333</div>
    <div id="con_4">44444</div>
    <div id="con_5">55555</div>
</div>
<!--底部-->
<div id="footer">footer</div>

简单样式给点,导航栏的样式要注意,这给当前样式单独做了一个DIV层,鼠标移动到哪个导航,这个当前样式层就移动到这个导航菜单上。

<style>
    *{margin:0;padding:0;}
    li,ol,ul{list-style:none;}
    a{color:#555;text-decoration:none;}
    a:hover{color:#0380FF;text-decoration:none;}
    #header{position:fixed;top:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
    .nav{position:relative;display:flex;box-sizing:border-box;width:100%;height:40px;flex-direction:row;align-items:center;}
    .nav li{z-index:99;display:flex;margin-right:10px;flex:1;align-items:center;justify-content:center;}
    .nav li a{padding:0 10px;white-space:nowrap;font-size:18px;}
    .nav li a.cur{color:#0380FF;}
    .nav_focus{position:absolute;width:100px;height:40px;border:1px solid #0380FF;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,.5);}/*当前样式层*/
    .container{margin-top:100px;}/*上边距给一个顶部的高度,不至于被顶部导航覆盖*/
    .container>div{height:800px;}
    #con_1{background-color:#ddf8ff;}
    #con_2{background-color:#f3ddff;}
    #con_3{background-color:#75b46f;}
    #con_4{background-color:#cfe053;}
    #con_5{background-color:#54ade0;}
    #footer{position:fixed;bottom:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
</style>

JS部分封装一个插件navScroll.js
在页面中调用引用JQ库以及这个插件

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/navScroll.js"></script>
<script>
    $(function() {
        // 获取重要节点
        var $header = $('#header'),
            $nav = $header.find('.nav'),
            $nava =$nav.find('li > a'),
            $navFocus = $nav.find('.nav_focus');
        navScroll($nav,$nava,$navFocus,'cur');
    })
</script>

navScroll.js

/*  导航滚动插件 参数:
*       navBox: 导航栏
*       navA: 导航列表,内部嵌套带有锚点的a标签
*       navFocus: 导航列表当前状态
*       className:导航列表 当前状态下的className
* */
function navScroll(navBox,navA,navFocus,className) {
    /* 设置 当前样式 宽度 和 位置 ,初始为第一个导航的位置*/
    var index = 0; // 设置当前索引 初始为0
    var $sW = navA.eq(index).outerWidth();
    var $sL = navA.eq(index).position().left;
    navFocus.css({  width: $sW, left:  $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(){
        var    docTop = $(document).scrollTop()+100,
            offsetTop=[];
        for(var i = 0,length = navA.length;i<length;i++){
            /*通过a标签href来获取ID选择器,转换为jq对象 使用jq方法*/
            offsetTop.push($($(navA[i]).attr("href")).offset().top);
            if( docTop>=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({
            /*根据a标签href转换为ID选择器 获取对应位置*/
            scrollTop: $($(this).attr("href")).offset().top - 100+"px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
// 当前样式 移动函数
    function navFocusMove(that) {
        navFocus.stop().animate( {
            width: that.outerWidth(),
            left:  that.position().left
        })
    }
// 添加当前样式,删除其他当前样式
    function curClass(curnavA) {
        curnavA.addClass(className).parent().siblings().find('a').removeClass(className);
    }
    /*记录上一次当前样式所在位置 */
    function curNav(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的小白,思路都在注释中,看不懂的请留言,不喜勿喷,欢迎指正!

javascript html css jquery

来源地址:https://segmentfault.com/a/1190000010854244 版权归作者所有!

相关教程

  • 进入页面跳转到指定锚点

    问题 在Vue实例完成之后,将锚点定位到指定元素。 分析: 如何实现,这是一个问题。首先生命周期函数,放在created钩子中,这个时候页面还没有渲染完成,如果进行锚点跳转,很可能就无法跳转到指定位置。因此只能放在生命周期钩子mounted中。 但是,如果直接使用location.hash也是有可能无法正常跳转,因此,要保证正常跳转,就要把跳转锚点的代码
  • Day22 - 鼠标锚点动画生成指南

    本文出自:春哥个人博客:http://www.liyuechun.org作者:©黎跃春-追时间的人简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现
  • React官网的RECENT POSTS阅读

    ⭐️写在开头 阅读React官网的 RECENT POSTS的个人翻译/摘要(部分)。 英文片段为官网原文片段。 原文地址 ⭐️为什么要使用React 目前已经有很多的JavaScript MVC frameworks出世,但是为什么Facebook需要创建React,并且又是什么原因导致我们想要去用它? 不是一个MVC框架。是一个可用来构建组件化
  • OpenLayers 官网例子的中文详解

    当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍不通,照着官网的例子做,也可以很快的实现想要的效果。 问题在于,官网的例子都是英文啊,不能很快定位到想要的效果是在哪个例子里面!!( 英文不渣就别看这篇文章了 ) 最近在学 openlayers ,我觉得非常有必要将 openlayers 官网的所有例子都看过去一遍,这篇文章就当是笔记了
  • 记前端从“刀耕火种”过渡到到“现代化”的自动构建工具(在ThinkPHP的项目里使用webpack)

    我是14年入的程序员大军,当时主java兼具前端开发的活儿,在现在看来的一些流开发框架和新兴思想,早在node.js开始进入大家视野的时候就流行起来了,只是在那时博主并没有关注前端的生态圈(然而java好像也并没有关注,逃),所以还是处在很多人所描述的刀耕火种的阶段,前端代码全部挂载到全局作用域,包括插件导出的变量。那更别提组件化和模块化的编程思想了,甚
  • IMWebConf 2017 官网彩蛋解谜

    前言 IMWebConf 2017 ←这是官网 然后看到了这个: 所以就试了下,作为一个前端菜鸟,发现通关还挺简单的,不过每个方面的知识都涉及到一点,所以在这里总结一下。 下面进入正题。 第 0 关 就在这个页面打开控制台就能看到这个信息: window.location.search.match(/imweb-magic-land/) == true
  • QT官网下载与安装

    1:官网下载地址: https://www.qt.io/qt-features-libraries-apis-tools-and-ide/#ide,可以切换为中文版网站 2.根据下面图片顺序一次选择相应的单选框
  • Koa2开发详解(自官网)

    Koa 次世代nodejs 的 web框架 简介 koa是由Express幕后团队打造的,目的是更小,更快,更稳定的web应用和apis。通过杠杆生成器(leveraging generators)Koa可以让你引导(ditch)回调函数,极大的提升错误处理。Koa核心不集成任何的中间件,其本身提供的优雅的功能套件就能够写出既快又nice的服务器。 安装