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

有两种方法实现，一种是利用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. 转 mysql有一个warning，但可以执行成功

    mysql有一个warning,但可以执行成功,报整型值错误,怎么解,求支招 转 http://tieba.baidu.com/p/4558183228

  2. 非关系型数据库---Memcached

    一.概述 1.Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载: 2.Memcached通过 在内存中缓存对象和数据 来减少读取数据库的次数,从而提升网站的 ...

  3. 配置了SSH后还是每次都要求输入密码

    保存凭证可以解决问题 git config --global credential.helper store

  4. 【Linux】Linux查看程序端口占用情况

    使用命令查询8880端口的占用信息: netstat -naop|grep 查询结果: 发现8880端口被PID为4518的进程占用 使用命令查询所有的进程和端口使用情况: netstat –apn ...

  5. mysql5.5.28.tar.gz编译安装操作笔记

    1.yum安装依赖包 yum install wget gcc gcc-c++ make cmake ncurses-devel libtool zilib-devel -y   2.创建mysql用 ...

  6. ACdream 1431——Sum vs Product——————【dfs+剪枝】

    Sum vs Product Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) S ...

  7. C 碎片四 流程控制

    前面介绍了程序中用到的一些基本要素(常量,变量,运算符,表达式),他们是构成程序的基本成分,下面将介绍C语言中流程控制的三种结构:顺序结构.分支结构.循环结构 一.顺序结构 顺序结构的程序设计是最简单 ...

  8. vim常用命令大全

    在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format.使 ...

  9. 安装mysql-installer-community

    1.在官网上下载mysql-installer-community-5.6.25.0 2.选择MySQL Installer 3.选择Windows (x86, 32-bit), MSI Instal ...

  10. 【干货】JavaScript DOM编程艺术学习笔记4-6

    四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("h ...