<!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. pandas.DataFrame对象解析

    pandas.DataFrame对象类型解析 df = pd.DataFrame([[1,"2",3,4],[5,"6",7,8]],columns=[&quo ...

  2. Verilog转电路图

    “你写的不是程序,是电路!”这句话听了很多,大多数人还是搞不太懂.程序怎么能是电路呢?这里将一些典型的Verilog转电路图贴出来,也许可以稍稍理解电路思想了. 1. 2. 3. 4. 5. 6. 7 ...

  3. change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面

    <template>   <div>     <!-- <div class="banner">       <a-breadcru ...

  4. Latex局部字体大小设置

    tex 设置字体大小命令由小到大依次为: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge \ ...

  5. Java性能调优—— VisualVM工具基本使用及监控本地和远程JVM进程超详细使用教程

  6. jvm堆内存模型原理分析及堆内存分析工具jhat和MAT的使用超详细教程

  7. python MySQL 插入Elasticsearch

    一.需求分析 注意: 本环境使用 elasticsearch 7.0版本开发,切勿低于此版本 mysql 表结构 有一张表,记录的数据特别的多,需要将7天前的记录,插入到Elasticsearch中, ...

  8. javascript 同源策略和 JSONP 的工作原理

    同源策略 同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容.同源是指:域名.协议.端口号都相同. 简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务 ...

  9. Java 面向对象知识扩展

    四种权限修饰符 java有四种权限修饰符:public > protected > (default) > private   public protected default pr ...

  10. django+celery+redis环境配置

    celery是python开发的分布式任务调度模块 Celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,celery支持的消息服务有RabbitMQ,redis甚至是数据库,redis ...