相信大家挺经常见过这样一个效果。有一个很长很长的页面，分成好几部分，目录中一点击，就能定位到页面某个位置。

例如：有这样一个目录，例如你点击一下“HTML”，就会直接跳转到“HTML”的页面位置

这就是锚点链接（也叫书签链接），常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具。

在长页面中，用锚点定位本页面的某个位置，那用锚点链接就可以了。用法很简单，代码demo如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8.  
  9. <a href="#5F">点击我，会锚点定位到某个地方</a>
  10. </br>
  11. </br>
  12. </br>
  13. </br>
  14. </br>
  15. </br>
  16. </br>
  17. </br>
  18. </br>
  19. </br>
  20. </br>
  21. </br>
  22. </br>
  23. </br>
  24. </br>
  25. </br>
  26. </br>
  27. </br>
  28. </br>
  29. <a name="5F">某个地方哈哈哈哈</href>
  30.  
  31. </body>
  32. </html>

　　

接下来，要讲的hash属性的锚点链接，实用性蛮高的。

在一次建站的过程中，遇到我遇到了这样一个问题，

在首页的导航中，我准备点击"关于我们"下拉菜单的“加入我们”,但是跳到“关于我们”页面后的tab还是已经停留在“新闻”的版块，并不是“加入我们”的版块。如图所示：

面对这种情况，我采用的是hash属性锚点链接，思路是这样的，先在index.html的导航四个链接中，先设置hash值，然后等到跳转到about.html的时候，再用var tab_hash=window.location.hash,去获取后面的hash值，才进行逻辑判断。

简单点说：其实还是跟普通的跳转一样，只不过在跳转的url后面加多了一个信息，让页面跳转后，再把信息拿下来使用。

一个小小实用性的属性，分享给大家，顺祝码祺！！

锚点链接和hash属性的更多相关文章

  1. H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  2. jquery 监听所有锚点链接实现平滑移动

    jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...

  3. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  4. HTML基础--position 绝对定位 相对定位 锚点链接

    position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...

  5. jquer导航锚点链接动画效果和返回顶部代码

    $(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...

  6. html邮件链接和锚点链接

    锚点链接: 锚点链接: 标记:<a name="XXX"></a> 取读:<a href="#XXX"></a> ...

  7. 给静态网站的链接添加nofollow属性

    给网站的链接添加nofollow属性对SEO非常有效,如果是动态网站,实现的方法比较多,但是对于静态网站来说只能借助CSS或者JS来实现,单纯的CSS实现需要覆盖所有的链接出现位置:JS与CSS结合则 ...

  8. 微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签

    最近在学习微信公众平台开发,由于编辑模式和开发模式不可同时开启,在开发模式下如果访客发送关键字过来暂时无法实现关键词自动回复,客服人员先用链接网址直接回复订阅用户,但请注意不能是文字链接,即<a ...

  9. div锚点链接跳转

    a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...

随机推荐

  1. centos的常用命令

    公司服务器主要是centos,第一篇就从centos的常用命令开始吧. 转载自:http://www.cnblogs.com/zitsing/archive/2012/05/02/2479009.ht ...

  2. ASP.NET常用技术之加密解密

    在开发项目中有许多数据需要我们进行加密解密操作,这里介绍几个加密解密的方法. 一:MD5加密 MD5加密是一种单向的加密算法,它只能加密,加密后不能进行逆向解密操作,常用于数字签名和加密用户密码. 下 ...

  3. ThinkPHP实现RBAC

    RBAC: role base access control   基于角色的用户访问权限控制 不同人员登录系统要显示不同的菜单项目 1.传统方式权限设置: 具体操作权限与用户直接联系:

  4. asp.net 防止页面刷新或后退引起重复提交

     项目中经常遇到刷新后重复的向数据库增加一条相同的记录,造成数据重复,如何规避这些问题呢?下面我们就一起讨论一下在asp.net怎样防止页面刷新或后退引起重复提交数据的问题: 其实asp.net防止刷 ...

  5. 使用js 在IE和火狐firfox 里动态增加select 的option

    使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...

  6. javascript 倒计时代码

    <script language="javascript" type="text/javascript"> var interval = 1000; ...

  7. 用c++11打造类似于python的range

    python中的range函数表示一个连续的有序序列,range使用起来很方便,因为在定义时就隐含了初始化过程,因为只需要给begin()和end()或者仅仅一个end(),就能表示一个连续的序列.还 ...

  8. shell如何生成rpm包仓库列表文件的对比结果

    基本步骤: 1.切换至仓库目录RPM_LIST_DIR1和RPM_LIST_DIR2 2.ls列出仓库的rpm包文件并分别重定向至输出文件rpm_list_file1和rpm_list_file2 3 ...

  9. 魔法方法：构造和析构 - 零基础入门学习Python041

    魔法方法:构造和析构 让编程改变世界 Change the world by program 构造和析构 什么是魔法方法呢?我们来系统总结下: - 魔法方法总是被双下划线包围,例如__init__ - ...

  10. javaWeb实现使用邮箱邮件找回密码功能

    JSP+Jmail+JavaBean 发邮件(转)2010-08-23 18:052007年04月14日 14:32/* * SendMail.java * * Created on 2007年3月3 ...