<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

    *{

    margin:0;

    padding:0;

    }

        ul{

            position: fixed;

            left: 0;

            top: 30%;

        }

        li{

            height: 40px;

            line-height: 40px;

            list-style: none;

            width: 100px;

            text-align: center;

            background: #f01;

            color: #ffffff;

            cursor:pointer;

        }

        a{

            color: #ffffff;

            text-decoration: none;

        }

        #a1{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a2{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a3{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a4{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        #a5{background: #fff;border: 1px solid #ddd;

            height: 900px;

            width: 90%;

            margin-left: 10%;

        }

        .active{

            background: #ddd;

        }

        .active>a{

            color: #000;

        }

        #LouDao{

            display: none;

        }

        #main{

            overflow: hidden;

        }

    </style>

</head>

<body>

<ul id="LouDao">

    <li><a>第一章</a></li>

    <li><a>第二章</a></li>

    <li><a>第三章</a></li>

    <li><a>第四章</a></li>

    <li><a>第五章</a></li>

</ul>

<div style="height:300px;"></div>

<div id="main">

    <div id="a1">1 这是一个悲惨的故事</div>

    <div id="a2">2 这是一个欢快的故事</div>

    <div id="a3">3 这是一个伤心的故事</div>

    <div id="a4">4 这是一个幸福的故事</div>

    <div id="a5">5 这是一个狗血的故事</div>

</div>

<footer>

    <div style="height: 900px;width: 100%">底部</div>

</footer>

</body>

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

    var daohang=$("#LouDao");//楼层标签

    var li=$("#LouDao>li");//获取目录li

    var main=$("#main>div");//文章主要内容

     $(window).scroll(function() {

        //获取到页面总高度

        var HeightAll = $("html,body").height();

        //获取滚动条位置

        var iTop = $(window).scrollTop();

        for(var i=0;i<main.length;i++){

            //楼层的显示和隐藏

            if(iTop>=main[0].offsetTop){

                daohang.show();

            }else{

                daohang.hide();

            };

            //楼层的联动

            var num=0;

            for(var i=0;i<main.length;i++){

                if(iTop>=(main[i].offsetTop)-100){

                    num=i;

                }

                li[i].className='';//设置li中的class为空

               //main[i].style.padding='35px 0 0 0';

            };

            li[num].className='active';

            //main[num].style.padding='65px 0 0 0';

            for(var i=0;i<li.length;i++){

                li[i].onclick=function(){

                    for(var j=0;j<li.length;j++){

                        if(this==li[j]){

                        console.log(li[j]);

                            var t = main.eq($(this).index()).offset().top;

                            console.log(t);

                            //alert(t);

                            //$(".louti").addClass("ommm");

                            $("html,body").animate({

                                //scrollTop:main[j].offsetTop

                                "scrollTop": t-100

                            },500);

                        }

                    }

                }

            }

        }

    });

</script>

</html>

jquery锚点跳转的更多相关文章

  1. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  2. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

  3. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

  4. jQuery实现锚点跳转（就一行代码）

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...

  5. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  6. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  7. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  8. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  9. zepto的scrollTo，实现锚点跳转

    实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...

随机推荐

  1. ASP.NET MVC请求参数字符串之区分空与NULL

    开发中经常会写增删改查的功能,这里记录下在更新操作时遇到的一个问题. 假设一个模型对应数据库中某一张表,在更新时便需要区分是一次性更新全部字段还是仅更新部分字段.希望能做到传递某个参数时便更新,未传递 ...

  2. gin - 读取Body后再次赋值

    这样就不影响后面读取了

  3. quartz2.3.0（十一）任务执行中故障情况，可设置重新执行任务

    任务类 package org.quartz.examples.example11; import org.quartz.Job; import org.quartz.JobExecutionCont ...

  4. Spring Cloud Alibaba学习笔记（18） - Spring Cloud Gateway 内置的过滤器工厂

    参考:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.1.0.RELEASE/single/spring-clou ...

  5. docker postgres 导出导入数据

    导出 -s  选项用来只导出表结构,而不会导出表中的数据 -t   选项用来指定要导出的数据库表 格式:docker exec -ti 容器名 pg_dump -U 用户名 -s -t table_n ...

  6. 4: ES内执行Groovy脚本，做文档部分更新、执行判断改变操作类型

    ES有内置的Groovy脚本执行内核,可以在命令的Json内嵌入Groovy脚本语句   前提数据:           

  7. MQTT协议中的topic

    1.MQTT协议中的topic 定阅与发布必须要有主题,只有当定阅了某个主题后,才能收到相应主题的payload,才能进行通信. 2. 主题层级分隔符--"/" 主题层级分隔符使得 ...

  8. 73.移动端Web界面滚动性能优化 Passive event listeners

    题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿. 这两个页面都用了touch事件 控制台打印如下警告: [Intervention] Unable to preve ...

  9. SAP开源的持续集成-持续交付的解决方案

    SAP开源的持续集成/持续交付的解决方案: (1) 一个叫做piper的github项目,包含一个针对Jenkins的共享库和一个方便大家快速搭建CI/CD环境的Docker镜像: (2) 一套SAP ...

  10. jenkins 启动

    docker pull jenkinsci/blueocean docker run \ -u root \ --rm \ -d \ -p 8888:8080 \ -p 50000:50000 \ - ...