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

有两种方法实现，一种是利用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. DB restore point and datagurad

    ######## 12.5.1 Flashing Back a Physical Standby Database to a Specific Point-in-Time The following ...

  2. Windows下搭建QT环境

    必须软件 qt-windows-opensource-5.1.1-msvc2010-x86-offline qt-vs-addin-1.2.2-opensource支持vs2008.2010.2012 ...

  3. deep copy and shallow copy

    链接A:浅拷贝就是成员数据之间的一一赋值:把值赋给一一赋给要拷贝的值.但是可能会有这样的情况:对象还包含资源,这里的资源可以值堆资源,或者一个文件..当值拷贝的时候,两个对象就有用共同的资源,同时对资 ...

  4. 【JavaEE】怎么设置tomcat管理员的用户名和密码

    如果我们输入错误的Tomcat管理员密码,那么就有提示如下: 2 从它的提示信息中,我们就能找到解决方法,请留意上图中标出的位置!   我们首先打开Tomcat的配置文件,具体如下:   我们进入To ...

  5. Spring+Junit+Mock测试web项目，即Controller

    准备:Maven依赖 <!-- Spring和MVC的包这里不列出来了,webmvc,aspects,orm,其他maven会自动导 --> <dependency> < ...

  6. JDBC让java程序连上数据库(mysql数据库)

    一.小论异常: 其实JDK已经提供了一组API让java程序连上数据库,并执行SQL语句,其实说起来也蛮简单的,但是绝对是一个细致活,因为稍不留神,异常就铺天盖地的来了,下面说说这些异常吧(声明一下: ...

  7. 性能测试学习第十天_controller

    集合点设置 controller虚拟多个用户执行脚本启动步骤不一定同步,集合点在脚本的某处设置一个标记,当有虚拟用户运行到这个标记的时候,停下等待所有用户都达到这个标记,再一同进行下面的步骤.这样可以 ...

  8. Android入门：封装一个HTTP请求的辅助类

    前面的文章中,我们曾经实现了一个HTTP的GET 和 POST 请求: 此处我封装了一个HTTP的get和post的辅助类,能够更好的使用: 类名:HttpRequestUtil 提供了如下功能: ( ...

  9. css动画-模拟正余弦曲线

    今天就写一个css3抛物线的动画吧= = 从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动. 水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴 ...

  10. visual studio2010中C#生成的，ArcGIS二次开发的basetool的dll，注册为COM组件tlb文件，并在arcmap中加载使用

    写了个标题好长啊~~~~ 这两天又认识了一个新玩意,记录一下下,啦啦啦~~~~~ 话说,认识arcgis快十年了,从桌面版到engine的二次开发,其实不过才认识到它的冰山一角, 它总是能带来很多还未 ...