锚点链接以及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属性的锚点链接,实用性蛮高的。

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

在首页的导航中,我准备点击about下拉菜单的joinus,但是跳到about页面后的tab还是已经停留在news的版块,并不是joinus的版块。如图所示:

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

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

时间: 2024-10-10 04:23:27

锚点链接以及hash属性的相关文章

bobowindow.location.hash 属性使用说明

location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location.hash则可以用来获取或设置页面的标签值.比如http://domain/#admin的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. 很 多人都喜欢收藏网页,以便于以后的浏览.不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说

HTML锚点链接

1.锚点链接:就是一个页面你在最下面会看见一个"点击回到顶部"的按钮 如何使用: (1)在最上面写 <a name="top"></a> (2)在最下面写 <a type="#top"></a> 注意:下面type中的属性就是上面的name中属性加上一个#

JQuery 实现锚点链接之间的平滑滚动

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,能够取代 JS 的.统统给用上了. 从 JQuery 引入今天的正题.用 JQuery 实现锚点链接之间的平滑滚动.曾经介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错.能够在同一页面的锚点链接之间实现平滑的滚动,可是 JS 代码相对来说比較冗长.如今好了.仅仅要已经载入了 JQuery.我们就能够用较为简短的代

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

jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash);

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

1 $(function(){ 2 $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 3 var index = this.title; //取得点击按钮的title属性,这里就是按钮的数字 4 // alert(index); 5 var id = "#" + "index_" + index; // 取得需要跳转到的div 的 id 6 // alert(id); 7 $(&quo

HTML锚与链接

A元素锚与链接的区别 锚(anchor)和链接(link)都是a元素,唯一不同的是有没有href attribute. 在Firefox35,Chrome41中,只要a元素有name这个attribute,不管name有没有值,都是锚.但在IE中,如果name没有值,又没有href,则既不是锚也不是链接. 在所有浏览器中,只要a元素有href属性,不管有没有值,都是链接. 锚的创建与作用 锚的作用是当URL的最后部分是#anchorname时,浏览器会滑动滚动条,使这个锚出现在可见窗口最顶端.

锚点链接 阻止a标签跳转

  参考 http://blog.csdn.net/awe5566/article/details/22583699 href="#downJacket" 锚点链接 必须写: 但又想阻止a标签跳转(阻止默认的滚动监听,好自己设置scrollTop), onclick="return fales" <a href="#downJacket" onclick="return false;" >羽绒</a>

锚点链接

含义: 锚点链接,是在一个网页的不同区域进行跳转 使用步骤: 1  定义锚点(做个记号): <a   name="锚点记号"> </a> 锚点名称的命名规格: 可以包含字母,数字,下划线 以字母打头 <a>和</a> 之间没有内容,即这个记号不是让我们看到,是链接使用的 <a name="top1"></a> 2  跳转到锚点(记号): 语法 <a href="文件名#锚点名称&

5.链接相关的属性以及其他属性

链接相关的属性: 1.为a与area元素增加了media属性.download属性以及ping属性,其中media属性规定目标URL是为什么类型的媒介/设备进行优化的,download属性用于让用户下载目标链接所指向的资源,而不是直接打开该目标资源,这些属性均只能在href属性存在时使用. 2.为area元素增加了hreflang属性与rel属性,以保持与a元素.link元素的一致. 3.为link元素增加了新属性sizes,该属性可以与icon元素结合使用(通过rel属性),该属性指定关联图标