锚点，在地址栏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. 嵌入式学习笔记(综合提高篇 第二章) -- FreeRTOS的移植和应用

    1.1    资料准备和分析 上章节通过实现双机通讯,了解如何设计和实现自定义协议,不过对于嵌入式系统来说,当然不仅仅包含协议,还有其它很多需要深入学习了解的知识,下面将列出我在工作和学习上遇到的嵌入 ...

  2. RAC改动归档文件夹

    逐个节点改动 关闭全部节点,启动单节点(rac1)到mount状态 SQL> startup mount; 改动server參数配置 SQL> alter system set clust ...

  3. BZOJ 1567: [JSOI2008]Blue Mary的战役地图 矩阵二维hash

    1567: [JSOI2008]Blue Mary的战役地图 Description Blue Mary最近迷上了玩Starcraft(星际争霸) 的RPG游戏.她正在设法寻找更多的战役地图以进一步提 ...

  4. 通过反射获取java nio Direct Memory 的最大值和已使用值

    (ps:jdk1.7及之后可通过MBean获取这两个值)

  5. BZOJ5379: Tree

    BZOJ5379: Tree Description JudgeOnline/upload/201806/1.pdf 题解Here! 题目大意就是:1. 换根.2. 对$LCA(u,v)$的子树修改. ...

  6. 最短路Dijkstra算法的一些扩展问题

    最短路Dijkstra算法的一些扩展问题     很早以前写过关于A*求k短路的文章,那时候还不明白为什么还可以把所有点重复的放入堆中,只知道那样求出来的就是对的.知其然不知其所以然是件容易引发伤痛的 ...

  7. Replace Type Code With Class和Replace Type Code With Subclass和Replace Type Code With State/Strategy

    周末闲来写写看书总结,今天写<重构>中的3个重要手法,分别是Replace Type Code With Class.Replace Type Code With Subclass和Rep ...

  8. PrintWrite

    向文本输出流打印对象的格式化表示形式.此类实现在 PrintStream 中的所有 print 方法.它不包含用于写入原始字节的方法,对于这些字节,程序应该使用未编码的字节流进行写入. 与 Print ...

  9. 【Nginx安装】CentOS7安装Nginx及配置

    [Nginx安装]CentOS7安装Nginx及配置 2018年03月05日 11:07:21 阅读数:7073 Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttp ...

  10. 软件GUI测试中的关注点

    [摘要] 本文列数了软件黑盒测试过程中,在被测试软件中可能存在的常见软件问题.本文不会详细讨论基本的软件测试思想与常用技术,仅针对在软件黑盒测试过程中若干的问题做描述,并提供个人的参考测试意见与防范意 ...