<!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. Python之 random 模块

    #!/usr/bin/env python # -*- coding:utf8 -*- import random ''' 如果想要随机的内容的话,就可以使用这个模块来完成 ''' ######### ...

  2. 《Docker Deep Dive》Note - 纵观 Docker

    <Docker Deep Dive>Note 由于GFW的隔离,国内拉取镜像会报TLS handshake timeout的错误:需要配置 registry-mirrors 为国内源解决这 ...

  3. java实现rabbitMQ消息收发方式

    定义:消息队列(MQ)是一种应用程序对应用程序的通信方法是AMQP协议. jar包依赖: <!-- 加入mq消息依赖包 -->  <dependency>         &l ...

  4. python线程（转）

    转自:https://www.cnblogs.com/huxi/archive/2010/06/26/1765808.html

  5. .net语音播放，自定义播报文字

    // using System.Speech.Synthesis; SpeechSynthesizer synth = new SpeechSynthesizer(); // Configure th ...

  6. power shell导出文件夹目录递归

    --获取目录:Get-ChildItem --递归目录:-Recurse --选择想要导出的目录参数,如:文件名,时间,权限等:Select-Object Name, LastWriteTime, M ...

  7. 有关mysql的utf8和utf8mb4，以及Illegal mix of collations for operation 'like'

    参考以下几个帖子: https://www.cnblogs.com/install/p/4417527.html https://blog.csdn.net/Yetmoon/article/detai ...

  8. thinkphp5 使用PHPExcel 导入导出

    首先下载PHPExcel类.网上很多,自行下载. 然后把文件放到vendor文件里面. 一般引用vendor里面的类或者插件用vendor(); 里面加载的就是vendor文件,然后想要加载哪个文件, ...

  9. QTableWidget数据表格

    void setRowHeight(int row, int height); //行高 void setVerticalHeaderLabels(const QStringList &lab ...

  10. 初始化构建React+Ts项目时出现:Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

    具体错误 ERROR in ./src/index.tsx Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssS ...