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

有两种方法实现，一种是利用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. Silverlight 创建 ImageButton

    这几天一直在折腾怎么在silverlight 按钮上添加图片,直接向imagebutton那样设置成属性可以直接更改,最后到处查找资料终于搞出一个imagebutton了. <Style x:K ...

  2. Java微信公众平台开发(十)--微信用户信息的获取

    前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信用户的信息,在上一篇我们有说道微信用户和微信公众账号之间的联系可以通过Openid关 ...

  3. 这个五月，我拿到了腾讯暑期offer

    前情回顾 本来学校就是双非,如果再没有些亮点,是很难进大厂的. 我比较幸运,曾在网易实习过一段时间,很感谢这段经历,让我有幸通过腾讯HR们的简历筛选. 对于腾讯春招,其实我是没有参加网申(2.28-3 ...

  4. iOS开发ReactiveCocoa学习笔记(六)

    RAC操作方法三. demo地址:https://github.com/SummerHH/ReactiveCocoa.git doNext deliverOn timeout interval del ...

  5. vue实现pdf导出，解决生成canvas模糊等问题

    最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --sa ...

  6. mockjs模拟数据请求

    一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...

  7. python 学习之FAQ:文档内容写入报错

    2017.3.29 FAQ 1. 文档内容写入报错 使用with open() as file: 写入文档时,出现'\xa9'特殊字符写入报错,通过print('\xa9')打印输出“©”. > ...

  8. 兼容ie8的圆形进度条

    主要是利用html5中的svg 画出圆形进度条 并且兼容ie8 https://github.com/GainLoss/Circular-progress-bar

  9. pat乙级1052

    输出“\”字符: cout << "\\"; 因为‘\’是转义字符,例如“\n”代表换行. 同理,printf输出“%”: printf("%%") ...

  10. linux 命令——10 cat (转）

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [选项] [文件] ...