<!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. php的ssh2扩展安装

    折腾半天,结论如下: 1.先需要openssl 用which openssl看是否已安装 2.然后libssh2 用rpm -ql libssh2查看 3.下载源码的shh2x.x.x.tgz的包 4 ...

  2. struts2结果类型

    struts2结果类型: 结果类型 描述 前request域属性是否丢失 1 dispatcher 用于与jsp整合的结果类型.默认结果类型. 2 chain Action链式处理结果类型.前一个Ac ...

  3. TCP/IP协议 HTTP协议

    TCP/IP协议 OSI传统的7层参考模型:物理层,数据链路层,网络层,传输层,话路层,表示层和应用层.而TCP/IP协议并不完全符合这7层参考模型,它只采用了其中的应用层,传输层,网络层和数据链路层 ...

  4. Docker Centos安装Mysql5.6

    之前一篇随笔<Docker Centos安装Openssh> 写的是如何在基础的centos镜像中搭建ssh服务,在此基础上再搭建其他服务.本文继续介绍在centos_ssh基础上搭建my ...

  5. 快速稳定的维护PHP

    Just to recap, previously we'd have this sort of thing: namespace me\adamcameron\testApp; use Guzzle ...

  6. Distinct<TSource>(IEqualityComparer<TSource> comparer) 根据列名来Distinct

    1. DistinctEqualityComparer.cs public class DistinctEqualityComparer<T, V> : IEqualityComparer ...

  7. UVa 10054，欧拉回路

    题目链接:https://uva.onlinejudge.org/external/100/10054.pdf 题目链接:http://vjudge.net/contest/132239#proble ...

  8. 内存恶鬼drawRect

    标题有点吓人,但是对于drawRect的评价倒是一点都不过分.在平日的开发中,随意覆盖drawRect方法,稍有不慎就会让你的程序内存暴增.下面我们来看一个例子. 去年的某天午后,北京的雾霾依旧像现在 ...

  9. 2016 ACM/ICPC Asia Regional Qingdao Online HDU5883

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5883 解法:先判断是不是欧拉路,然后枚举 #pragma comment(linker, "/S ...

  10. 进程间通信之打开关闭一个exe文件

    一.打开 1.WinExec("F:\\QQ\\Bin\\QQ.exe",SW_SHOW); 注意:'\'需要改成'\\',阻塞 2. STARTUPINFO si; PROCES ...