锚点，在地址栏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. 二叉查找树python实现

    1. 二叉查找树的定义: 左子树不为空的时候.左子树的结点值小于根节点,右子树不为空时,右子树的结点值大于根节点.左右子树分别为二叉查找树 2. 二叉查找树的最左边的结点即为最小值,要查找最小值.仅仅 ...

  2. 使用Axis2开发WebService

    一.准备 1.下载Axis2.eclipse插件 axis2-1.6.2-war.zip: http://mirror.bjtu.edu.cn/apache//axis/axis2/java/core ...

  3. Android Webview的测试

    1.查看当前的所有窗口: Set contexts= driver.getContextHandles(); System.out.println(contexts); 打印出当前所有的窗口 Set& ...

  4. CString转换成char *字符串问题

    buf = (LPSTR)(LPCTSTR)str;      ==>     buf 显示的是第一个字符 strcpy(pNumber,strNumber);      ==>    e ...

  5. python day-15 匿名函数 sorted ()函数 filter()函数 map()函数 递归 二分法

    一.匿名函数 匿名函数的结构:变量   =  lamda  参数: 返回值 a  =  lamda  x : x*x       # x为参数,   : 后边的为函数体 print(a(x)) def ...

  6. 中断线程Interrupt()

    以下是参考<<Java多线程模式>>的 1. sleep() & interrupt() 线程A正在使用sleep()暂停着: Thread.sleep(100000) ...

  7. 【酷Q&C++】如何利用酷Q制作一个机器人？

    ——酷Q Air教程 要想阅读本篇教程,读者需要基本的C++知识以及Visual Studio 2010/2015/2017 首先,需要从官方网站下载软件 https://cqp.cc/t/23253 ...

  8. 推断View是否显示在界面上

    我们都知道ViewController有viewWillAppear和viewDidAppear等关于页面生命周期的方法,用来对视图做一些管理,比方页面出现时怎么样,页面消失时怎么样.. 可是对于Vi ...

  9. BAPI_PO_CEATE 与PO_1

  10. node js 安装时选择勾上path

    勾上path则会自动配置环境变量,否则必须手动去添加nodejs的环境变量.