锚点，在地址栏http://localhost:8000/Demo1/js锚点.html#a   跳转到指定位置可以是 <a>标签的name 也可以是标签的id。

曾经看到有锚点的页面，但在代码里看不到name或id为那个锚点的标签，很是费解。在网上一顿查，原来可以使用 window.location.hash 这个便是获取或设置锚点。这难道又是基础不扎实的表现吗？w3school上面是有这东西。

看代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>js锚点</title>

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

    <script type="text/javascript">

        $(function () {

            $("#demo a").on("click", function () {

                var self = $(this);

                var hash = self.attr("href").split('#')[1];

                window.location.hash = "m-" + hash;

            });

        });

    </script>

</head>

<body>

    <div id="demo">

        <a href="#a">跳转A</a>

        <a href="#b">跳转B</a>

    </div>

    <div style="height: 500px;background-color: #00ced1"></div>

    <div id="m-a" style="height: 200px;background-color: #b6ff00">

    </div>

    <div id="m-b" style="height: 200px;background-color: #808080">

    </div>

</body>

</html>

还有个小问题，地址栏有锚点时 F5刷新 页面不会跳转到指定位置，可以这么搞一下。

$(function () {

            var hash = window.location.hash;

            var id = hash.split('#')[1];

            if (id) {

                var t = $('#m-' + id).offset().top;

                $(window).scrollTop(t);

            }

        });

这样就能刷新跳过去了。这个方法还可以改造下，加个动画，点了锚点以后让页面慢慢的走到锚点。

js锚点的更多相关文章

  1. js 锚点定位【转】

    锚点定义 <a name="firstAnchor">&nsbp;</a> a标签锚点使用 <a href="#firstAncho ...

  2. JS——锚点的运用

    锚点的两种形式: 1.<a href="#a">点击到锚点</a> 2.window.location.hash = "#a"; 最后都 ...

  3. js - 锚点-scrollIntoView()

    document.getElementById("view").scrollIntoView(false);

  4. Jquery分页功能

    Jquery代码 /// <reference path="jquery-1.9.1-vsdoc.js" />//锚点var anchor="#apage&q ...

  5. js 定位到某个锚点

    js 定位到某个锚点 html页面内可以设置锚点,锚点定义 <a name="firstAnchor">&nsbp;</a> 锚点使用 <a  ...

  6. 使用js实现html锚功能，可以任意定位锚的位置，比锚更加灵活

    今天记录一个js功能,发现该功能很实用,拿出来跟大家分享. 这里我使用js的window.scrollTo()函数,该函数的用法给大家重复一下,语法为scrollTo(x,y),这里x表示在窗口文档显 ...

  7. 使用JS模拟锚点跳转

    A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...

  8. js实现锚点定位

    js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置. <!DOCTYPE html> <html> <head> ...

  9. 页面回到顶部的三种实现(锚标记，js)

    一.使用锚标记返回页面顶部 使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么. 页面顶部放置: <a name="top" id ...

随机推荐

  1. 【转载】Http协议与TCP协议简单理解

    在C#编写代码,很多时候会遇到Http协议或者TCP协议,这里做一个简单的理解.TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上 ...

  2. Cocoapods Undefined symbols for architecture armv7s\arm64

    此类错误 "_OBJC_CLASS_$_AFURLSessionManager", referenced from: 解决的方法 在other linker flags里加入一行 ...

  3. HDU 1312 Red and Black 第一题搜索！

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  4. Python演绎的精彩故事（二）

    书接上回.在展示了App最顶层的代码后,我们去看看各模块怎样编程. 为了能看懂各模块的代码,首先须要铺垫一下Softchip架构的基本概念和设计规范. 1.随意模块不持有其它模块的实例.自然不再显式使 ...

  5. JfreeChart折线图 CSDN-李鹏飞

    今天公司里分配给我的工作是JfreeChart折线图本人之前也没接触过如今让我们大家一起完毕! 在这个公司,用到了太多的JfreeChart,今天就对折线图作一个总结,希望对大家有点帮助,我这里直接是 ...

  6. 项目Beta冲刺（团队6/7）

    项目Beta冲刺(团队6/7) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标: 完成项目Beta版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 陈宇 ...

  7. c++vector简单实现

    const int DEFAULT_CAP = 3; template <typename T> class vector { // int capacity; T* _data; int ...

  8. 前端遇上Go: 静态资源增量更新的新实践

    前端遇上Go: 静态资源增量更新的新实践https://mp.weixin.qq.com/s/hCqQW1F8FngPPGZAisAWUg 前端遇上Go: 静态资源增量更新的新实践 原创: 洋河 美团 ...

  9. monggodb 复制集 集群 搭建

    https://docs.mongodb.com/manual/tutorial/enable-authentication/ Overview Enabling access control on ...

  10. 定时任务Timer

    一.Timer介绍 java.util.Timer java.util.TimerTask Timer是一个定时器类,通过该类可以为指定的定时任务进行配置.TimerTask类是一个定时任务类,该类实 ...