锚点，在地址栏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. 《ASP.NET》数据绑定—DataList

    DataList控件是.NET中的一个控件.DataList控件以表的形式呈现数据(在属性生成器中能够编辑),通过该控件,您能够使用不同的布局来显示数据记录(使用模板编辑).比如,将数据记录排成列或行 ...

  2. ID--HANDLE--HWND三者之间的互相转换

    利用PreTranslateMessage,响应按钮控件的按下(WM_LBUTTONDOWN)和松开(WM_LBUTTONUP)   VC的button控制只有两个事件,一个是单击事件,一个事双击事件 ...

  3. 初识跨终端Web

    近期试读了<跨终端Web>这本书的部分章节,既为了拿到书,也为了记录下读后的收获的东西,这会是个非常好的习惯吧. 标题为"初识跨终端Web".对我来说最贴切了,在此之前 ...

  4. VS 预先生成事件命令

    宏 说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) 输出文件目录的路径,相对于项目目录.这解析为“输出目录”属性的值. ...

  5. CSS 媒体类型 总结

    CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体类型 一些CSS属性只设计了某些媒体.例如"voice-f ...

  6. 逼近法（例 poj3208、poj1037）

    ​ 逼近法是一种很奇妙的算法,以为"逼近"这一种思想在很多的算法中都有体现.诸如:像我们的二分答案,不断地排除决策集合的一半以接近我们的最终答案:我们的树上倍增求 \(LCA\) ...

  7. Model drivern

    <s:hidden name="id" value="%{role.id}"></s:hidden> 其中的value传到后台是有类型的 ...

  8. Linux：外网域名防火墙设置导致下载失败

    问题现象: 通过IE从服务器下载文件时,提示Can't read from connection: Connection reset by peer. 别的现场都是好的,只有该现场有这个问题.所以,一 ...

  9. 第三届蓝桥杯C++B组省赛

    1.微生物增值 2.古堡算式 3.海盗比酒量 4.奇怪的比赛 5.方阵旋转 6.大数乘法 7.放棋子 8.密码发生器 9.夺冠概率 10.取球博弈

  10. UVA-10600(次小生成树)

    题意: 现在给一个图,问最小生成树和次小生成树的权值和是多少; 思路: 求最小生成树的两种方法,次小生成树是交换最小生成树的其中一条边得到的,现在得到了最小生成树,枚举不在次小生成树中的边,再求一边最 ...