在逛购物网站首页时经常看到侧边导航栏，当我们点击导航栏中某一项时会跳转到当前页面的某一处

有两种方法实现，一种是利用js计算好各位置的高度，通过绑定事件使页面跳转到指定位置，另一种是利用a标签进行当前页面不同部位跳转

方法1、js

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <script src="js/introduction.js"></script>

     <link rel="stylesheet" href="css/induction.css">

 </head>

 <body>

 <div class="container">

     <div class="head">head</div>

     <div class="content">

         <div class="box">天猫超市</div>

         <div class="box">天猫国际</div>

         <div class="box">美丽人生</div>

         <div class="box">潮店酷玩</div>

         <div class="box">5</div>

         <div class="box">6</div>

         <div class="box">户外出行</div>

         <div class="box">猜你喜欢</div>

     </div>

     <div class="side">

         <div class="left-side">导航</div>

         <div class="left-side">天猫超市</div>

         <div class="left-side">天猫国际</div>

         <div class="left-side">美丽人生</div>

         <div class="left-side">潮店酷玩</div>

         <div class="left-side">居家生活</div>

         <div class="left-side">打造爱巢</div>

         <div class="left-side">户外出行</div>

         <div class="left-side">猜你喜欢</div>

         <div id="goTop" class="left-side">顶部</div>

     </div>

 </div>

 </body>

 </html>

 body{margin:0;}

 .box{

     height: 300px;

     width:600px;

     margin:0 auto;

     /*border:1px solid #000;*/

     background-color: #dc90e4;

 }

 .head{

     width: 600px;

     height:600px;

     margin:0 auto;

     background-color: #fddda0;

 }

 .side{

     display:none;

     position:fixed;

     top:150px;

     font-size:12px;

     font-family:"PingFang SC";

     font-weight:400;

 }

 .left-side{

     box-sizing:content-box;

     width: 30px;

     height: 30px;

     margin-top:1px;

     text-align: center;

     padding:5px;

     background-color: #ddd;

 }

 $(function(){

     var tp,inx;

     $(window).scroll(function(){

          tp=$(window).scrollTop();

         if(tp>=200){

             $(".side").fadeIn(1000,function(){

                 $(this).show();

             });

         }else{

             $(".side").fadeOut(1000,function(){

                 $(this).hide();

             });

         }

     });

     $("#goTop").on("click",function(){

         $("html").animate({scrollTop:0},1000)

         return false

     });

     $(".left-side").click(function(){

         inx=$(this).index();

         if(inx>0&&inx<9){

         $("html").animate({scrollTop:(600+(inx-1)*300+"px")},1000);         }

     });

 });

只是简单的写一下原理

方法2、a标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

        $(function(){

        $(".container div").height($(window).height());

        })

    </script>

    <style>

        .container div{

            width: 600px;

            margin:0 auto;

        }

        .container div:nth-child(odd){

            background-color: #dc90e4;

        }

        .container div:nth-child(even){

            background-color: #fddda0;

        }

        .side{

            position:fixed;

            top:150px;

        }

        a{

            display:block;

            text-decoration: none;

        }

        a:hover{

            color:green;

        }

        a:active{

            color:red;

        }

        a:link{

            color:yellow;

        }

        a:visited{

            color:cyan;

        }

    </style>

</head>

<body>

<div class="container">

    <div id="box1">box1</div>

    <div id="box2">box2</div>

    <div id="box3">box3</div>

    <div id="box4">box4</div>

    <div id="box5">box5</div>

    <div id="box6">box6</div>

    <div id="box7">box7</div>

    <div id="box8">box8</div>

</div>

<div class="side">

    <a href="jump-page.html#box1">box1</a>

    <a href="jump-page.html#box2">box2</a>

    <a href="jump-page.html#box3">box3</a>

    <a href="jump-page.html#box4">box4</a>

    <a href="jump-page.html#box5">box5</a>

    <a href="jump-page.html#box6">box6</a>

    <a href="jump-page.html#box7">box7</a>

    <a href="jump-page.html#box8">box8</a>

</div>

</body>

</html>

方法1实现的具有滚动效果，也是网站中最常用的

1、利用jquery中的scrollTop()方法获取匹配元素相对滚动条顶部的偏移。

2、修改匹配元素的scrollTop属性值

方法2在实现时触发了a标签 ，但仍跳转到当前页面的与a标签中的id对应的部位，浏览器上面的页签有刷新显示，关键是

  1. 定义目标位置，赋予id。
  2. 给a标签添加href为#id。

jquery/js/a标签实现当前页面跳转的两种方法的更多相关文章

  1. uni-app 页面跳转的两种方法

    1.navigator  标签 <navigator url="../component/classdetails/classdetails"> <view cl ...

  2. 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  3. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  4. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  5. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  6. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  7. HTML 页面跳转的五种方法

    H方法TML 页面跳转的五种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <he ...

  8. vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法

    最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...

  9. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

随机推荐

  1. SQL2008无法启动,报错"17051"解决方法

    SQL2008无法启动,这是错误日志: C:/Program Files/Microsoft SQL Server/MSSQL10_50.MSSQLSERVER/MSSQL/Log 2011-06-0 ...

  2. git merge的参数--squash的用处

    本地分支处理问题的过程中一般都是commit在本地分支,当验证完毕后就需要merge到baseline上. 在不懂merge的--squash这个参数前,我一般是这么操作的: 1.在本地分支" ...

  3. cgkib动态代理详解-不依赖接口，速度快

    1. cglib原理-不依赖接口,速度快 使用ASM字节框架动态生成要代理类的子类,子类重写final以外的方法,织入横切逻辑 2. 示例-实现MethodInterceptor Test.java ...

  4. 初学struts2-入门案列

    1.所需类库 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactI ...

  5. agc007B - Construct Sequences(构造)

    题意 题目链接 给出一个$1-N$的排列$P$,构造两个数组$a, b$满足 Sol 发现我的水平也就是能做一做0-699的题.... 直接构造两个等差数列$a, b$,公差为$20000$ 然后从小 ...

  6. a标签嵌套a标签效果的两种解决方案

    <!-- a标签进行嵌套的时候 --> <a href="#outer">outerA <a href="#inner">i ...

  7. input和textarea修改placeholder颜色和字号

    方式1因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea).::-webkit-input-placeholder { /* We ...

  8. eros 修改 android上原生picker的颜色的呢

    修改选中颜色和文字颜色 修改文件如下 修改窗口底色

  9. Redis安装配置及在Python上的应用

    最近在使用Kazoo(开源电话系统) API时,一次请求的处理需要调用几次API,只为了得到一个name和id的对应关系,耗时非常大,开始想使用一种简单的实现,直接将对应关系保存到静态类的静态变量中, ...

  10. selenium 使用键盘时 提示java.lang.IllegalArgumentException: Key Down / Up events only make sense for modifier keys.

    输入某个内容后,使用enter键进行确认,最开始使用方式为: driver.findElement(By.xpath("//input[@name='supplier_name'][@id= ...