<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         *{padding:0;margin:0;}

         .top{ width:100%; height:100px; text-align: center; line-height: 100px;}

         .nav{ width:100%; height:100px;}

         .nav ul{width:100%; list-style: none;}

         .nav ul li { float:left; line-height:100px;

             text-align: center; width:25%; background:#0095cd;}

         .fixed {position:fixed; top:0px;}

         .cont1,.cont2,.cont3,.cont4{width:100%;height:400px; color:#fff;}

         .cont1 {background:#00678e; text-align:center; line-height: 400px;}

         .cont2 {background:#0F3A56; text-align:center; line-height: 400px;}

         .cont3 {background:#33bbee; text-align:center; line-height: 400px;}

         .cont4 {background:#7ca1f8; text-align:center; line-height: 400px;}

         .footer { background:#68767b; text-align:center;line-height:200px;}

     </style>

     <script src="style/js/jquery-1.8.3.min.js"></script>

         <script>

         $(function(){

             $(window).scroll(function(){

                 if ($(window).scrollTop() >= 100) {

                     $('.nav').addClass('fixed');

                 } else {

                     $('.nav').removeClass('fixed');

                 }

             })

             var _li = $('.nav').find('li');

             _li.each(function(){

                 var index = $(this).index();

                 $(this).find('a').click(function(){

                     var len = index-1;

                     var numTop = getHeight(len);

                     $('html,body').animate({scrollTop: numTop + "px"},300);

                 })

             })

         })

         function getHeight(index) {

             var heightall = 0;

             for(i=0;i<=index;i++){

                 heightall += 400;

             }

             return heightall;

         }

     </script>

 </head>

 <body>

 <div class="top">这是顶部，高度为100px</div>

 <div class="nav">

     <ul>

         <li><a>first</a></li>

         <li><a>scond</a></li>

         <li><a>third</a></li>

         <li><a>four</a></li>

     </ul>

 </div>

 <div class="cont1">this is content1</div>

 <div class="cont2">this is content2</div>

 <div class="cont3">this is content3</div>

 <div class="cont4">this is content4</div>

 <div class="footer">this is footer</div>

 </body>

 </html>

jquery 跳转到当前页面指定位置的更多相关文章

  1. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  2. html锚点 点击跳转到页面指定位置

    本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...

  3. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  4. coolite 获取新的页面链接到当前页面指定位置Panel的运用

    如下图所示,点击温州市文成县之前,右边是一片空白,点击后生成新的页面 html运用到了coolite的Panel控件 <Center> <ext:Panel ID="Pan ...

  5. jQuery跳转到页面指定位置

    @参考博客 var t = $("#id").offset().top;// 获取需要跳转到标签的top值 //$(window).scrollTop(t);// 跳转到指定位置 ...

  6. 锚点/JQ：点击导航跳到网页中的指定位置

    今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...

  7. 通过href简单实现单击a链接跳转到页面指定位置

    在页面中点击a标签后,要使其跳到页面里面相应的地方,方法很简单,就是在a标签里面href中的内容和你要跳到这个区域的id同名即可,例如: <a href="#ppp" tar ...

  8. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...

  9. JQuery插件：ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

随机推荐

  1. 利用arcigs制作出 源解析要用的ASCII文件

    准备:1.确定好模拟区域范围,精度,行列数          2.确定好源解析的城市规划 思路: 1.全国省级图+本地市县图-->合成一张区域图(联合) 合成之后,添加一个字段,一个数字类型字段 ...

  2. UIView完全置顶的方法

    一般来说,若需要独立添加一个UIView,使其覆盖于整个应用窗口之上,是这样实现的: AppDelegate *app = (AppDelegate *)[[UIApplication sharedA ...

  3. IOS 网络请求中设置cookie

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   1. ASIHTTPRequest ASIHTTPRequest 是一款极其强劲的 HTTP 访问开源项目.让简单的 A ...

  4. git修改文件名大小写的方法。

    首先,在git命令行里面运行: git config core.ignorecase false 此命令是全局设置,以后在此机子上clone出来的git仓库工程都沿用此设置.当然,以前就已经clone ...

  5. Android内存溢出解决方案（OOM）

    众所周知,每个Android应用程序在运行时都有一定的内存限制,限制大小一般为16MB或24MB(视平台而定).因此在开发应用时需要特别关注自身的内存使用量,而一般最耗内存量的资源,一般是图片.音频文 ...

  6. SQLServer学习笔记<>相关子查询及复杂查询

    二.查询缺少值的查询 在这里我们加入要查询2008年每一天的订单有多少?首先我们可以查询下订单表的订单日期在2008年的所有订单信息. 1 select distinct orderdate,coun ...

  7. mysql使用索引扫描来做排序

    mysql有两种方式可以生成有序的结果,通过排序操作或者按照索引顺序扫描,如果explain的type列的值为index,则说明mysql使用了索引扫描来做排序(不要和extra列的Using ind ...

  8. [BIM]STEP标准和EXPRESS语言

    参考:http://blog.sina.com.cn/s/blog_620be62e0100iqyb.html (BIM名词和术语(四)- IFC/STEP/EXPRESS) IFC标准使用形式化的数 ...

  9. 【转】MYSQL入门学习之八：数据库及表的基本操作

    转载地址:http://www.2cto.com/database/201212/175867.html 一.操作数据库  www.2cto.com    1.查看数据库          show ...

  10. 在opencv中实现中文输出

    http://pan.baidu.com/s/1hrQTWDe 已经成功 ; 来自为知笔记(Wiz)