锚点链接和hash属性
相信大家挺经常见过这样一个效果。有一个很长很长的页面，分成好几部分，目录中一点击，就能定位到页面某个位置。
例如：有这样一个目录，例如你点击一下“HTML”，就会直接跳转到“HTML”的页面位置
这就是锚点链接（也叫书签链接），常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具。
在长页面中，用锚点定位本页面的某个位置，那用锚点链接就可以了。用法很简单，代码demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <a href="#5F">点击我，会锚点定位到某个地方</a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<a name="5F">某个地方哈哈哈哈</href> </body>
</html>
接下来，要讲的hash属性的锚点链接，实用性蛮高的。
在一次建站的过程中，遇到我遇到了这样一个问题，
在首页的导航中，我准备点击"关于我们"下拉菜单的“加入我们”,但是跳到“关于我们”页面后的tab还是已经停留在“新闻”的版块，并不是“加入我们”的版块。如图所示：
面对这种情况，我采用的是hash属性锚点链接，思路是这样的，先在index.html的导航四个链接中，先设置hash值，然后等到跳转到about.html的时候，再用var tab_hash=window.location.hash,去获取后面的hash值，才进行逻辑判断。
简单点说：其实还是跟普通的跳转一样，只不过在跳转的url后面加多了一个信息，让页面跳转后，再把信息拿下来使用。
一个小小实用性的属性，分享给大家，顺祝码祺！！
锚点链接和hash属性的更多相关文章
- H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- jquery 监听所有锚点链接实现平滑移动
jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- HTML基础--position 绝对定位 相对定位 锚点链接
position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...
- jquer导航锚点链接动画效果和返回顶部代码
$(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...
- html邮件链接和锚点链接
锚点链接: 锚点链接: 标记:<a name="XXX"></a> 取读:<a href="#XXX"></a> ...
- 给静态网站的链接添加nofollow属性
给网站的链接添加nofollow属性对SEO非常有效,如果是动态网站,实现的方法比较多,但是对于静态网站来说只能借助CSS或者JS来实现,单纯的CSS实现需要覆盖所有的链接出现位置:JS与CSS结合则 ...
- 微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签
最近在学习微信公众平台开发,由于编辑模式和开发模式不可同时开启,在开发模式下如果访客发送关键字过来暂时无法实现关键词自动回复,客服人员先用链接网址直接回复订阅用户,但请注意不能是文字链接,即<a ...
- div锚点链接跳转
a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...
随机推荐
- 搭建Struts2开发环境
搭建Struts2环境时,我们一般需要做以下几个步骤的工作: 1.创建javaweb工程 2.找到开发Struts2应用需要使用到的jar文件 3.创建jsp文件 4.创建action文件 5.编写S ...
- 纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形 向右的三角形 向下的三角形 向左的三角形 实现它们的css分别是: .top ...
- 关于PHP伪静态Rewrite设置
Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则 表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 一.Apache配置: 1.支持httpd ...
- Css3执行后显示最后一针
-webkit-animation-fill-mode: both; animation-fill-mode: both;
- CSS3+HTML5学习笔记（1）
box内阴影: -moz-box-shadow:inset 30px #; -webkit-box-shadow:inset 30px #; box-shadow:inset 30px #; 多重文字 ...
- sunJCE or ibmJce,was服务器下使用des的注意点
最近开发了一个应用,在tomcat下一切ok,到was上有报错. 打开debug日志,没有异常?? 继续调查发现是我们的程序引用了一个sun很久以前的jar.这个jar需要单独打开message日志 ...
- Unity3d中的Awake()、OnEnable()、Start()等默认函数的执行顺序和生命周期
Awake()在MonoBehavior创建后就立刻调用,在脚本实例的整个生命周期中,Awake函数仅执行一次:如果游戏对象(即gameObject)的初始状态为关闭状态,那么运行程序,Awake函数 ...
- mongodb 增加用户以及认证用户
test>use admin switched to db admin admin>db.addUser('yshy','yshy') { "user" : " ...
- POJ 1987 Distance Statistics
http://poj.org/problem?id=1987 题意:给一棵树,求树上有多少对节点满足距离<=K 思路:点分治,我们考虑把每个距离都存起来,然后排序,一遍扫描计算一下,注意还要减掉 ...
- Android双击返回键退出Activity的两种方法
在开发应用程序的时候,有一种功能是非常常用到的,那就是迅速双击返回按钮,然后实现退出Activity的功能.本人在网上看了很多资料代码,总结起来,主要有两种比较好的方式.一种是开线程延时执行,一种是记 ...