锚点，在地址栏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. @Transactional 无效的解决方案

    1 .在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方法.类定义和类的 public 方法上 . 2 . @Transactio ...

  2. openwrt 实现hotplug-button

    <*> kmod-gpio-button-hotplug................Simple GPIO Button Hotplug driver gpio-button-hotp ...

  3. ios+Appium+Java

    To run iOS tests, you can follow these steps : (Note : I am using Java language here in Eclipse IDE ...

  4. FZUOJ Problem 2200 cleaning DP

    Problem 2200 cleaning  Problem Description N个人围成一圈在讨论大扫除的事情,需要选出K个人.但是每个人与他距离为2的人存在矛盾,所以这K个人中任意两个人的距 ...

  5. HashMap随机取值和迭代器取值的对比

    一共四中方法,前两种是迭代器取值,后两种是随机取值,循环了5000万次,时间分别为:迭代器读取的速度大约是随机读取的速度的1.5倍,数据量越大,差距越明显. 另外,插入是读取的100倍左右的时间(这个 ...

  6. extjs4.0 treepanel节点的选中、展开！ 数据的重新加载

    1.extjs4.0API较3.0有非常大变化2.多级子父节点的选中和展开.3.数据的重新加载.tree.getStore().load4.节点的移除,从树中根据ID获取节点 tree.getStor ...

  7. kaminari分页插件样式

    修改国际化文件,zh-cn views: pagination: first: "首页" last: "尾页" previous: "上一页" ...

  8. 使用delphi 开发多层应用（十六）使用XMLRPC 实现basic4android 远程调用RTC服务（讲述了RTC的特点，其底层通讯协议是自己封装SOCK 库，与kbmmw 的适合场合不完全一样）

        RealThinClient (以下简称RTC) 也是一款delphi 多层开发的框架,由于其底层通讯协议是自己封装SOCK 库,抛弃了 大家诟病的indy,因此表现的非常稳定,效率也非常高, ...

  9. html5--6-14 CSS3中的颜色表示方式

    html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...

  10. 常用文件操作模块json，pickle、shelve和XML

    一.json 和 pickle模块 用于序列化的两个模块 json,用于字符串 和 python数据类型间进行转换 pickle,用于python特有的类型 和 python的数据类型间进行转换 Js ...