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

有两种方法实现，一种是利用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. C A Simple Job

    题目3 : A Simple Job时间限制:1000ms单点时限:1000ms内存限制:256MB描述Institute of Computational Linguistics (ICL), Pe ...

  2. RAID磁盘分区的创建

    RAID(Reduntant Arrays of Independent Disks),即独立冗余磁盘阵列. RAID的级别: Raid 0: 条带 Raid 1: 镜像 Raid 2,3,4,5 等 ...

  3. 机器学习框架ML.NET学习笔记【4】多元分类之手写数字识别

    一.问题与解决方案 通过多元分类算法进行手写数字识别,手写数字的图片分辨率为8*8的灰度图片.已经预先进行过处理,读取了各像素点的灰度值,并进行了标记. 其中第0列是序号(不参与运算).1-64列是像 ...

  4. jQuery 方法 属性

    Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.j ...

  5. 2019年我的nodejs项目选型

    选型项目比较激进.发现基于 go 语言的工具变多了.

  6. ORACLE将查询的多条语句拼在一个字段下

    select listagg(字段名,'分隔符') within group (order by 某个字段)

  7. springboot 学习笔记（六）

    (六)springboot整合activemq 1.现下载activemq,下载链接:http://activemq.apache.org/download.html,windows系统解压后进入bi ...

  8. html5标签的兼容性处理

    HTML5的语义化标签以及属性 1.可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单 2.使用他们能让代码语义化更直观,而且更方便SEO ...

  9. Unity3D Shader性能排行

    整体上,性能由高到低: Unlit,仅为纹理,光线不产生效果 VertexLit Diffuse 漫反射 Normal Mapped 法线贴图 Specular 高光 Normal Mapped Sp ...

  10. OpenSSL context 的几个参数

    NAME SYNOPSIS DESCRIPTION NOTES BUGS RETURN VALUES EXAMPLES SEE ALSO NAME SSL_CTX_set_verify, SSL_se ...