码迷,mamicode.com
首页 > Web开发 > 详细

css中的锚点

时间:2018-01-22 13:04:34      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:http   处理   通过   nod   事件   pre   turn   col   als   

一,在同一页面:

在页面适当位置定义如下的锚点

<a name="top">这里是TOP部分</a>
<a name="content">这里是CONTENT部分</a>
<a name="foot">这里是FOOT部分</a>    //这里的name换成id同样有效

(你可以使用id属性来替代name属性,明明锚点同样有效)

注意:使用id来定义锚点,可以定位针对任何标签来定位。name属性只能针对a标签来定位。

 

对于如上锚点的访问有两种方法:

1,利用超链接<a></a>制作锚点链接,主要用于页面内的锚点访问

<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>

2,另一种方式,是直接在页面地址后面加锚点标记,主要用于不同页面之间的锚点访问

假如本页面的地址是http://文件路径/index.html,要访问foot锚点只要访问如下链接即可
http://文件路径/index.html#foot

 

二,在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点

<a href="a.html#add">跳转到a.add</a>

 

三,点击链接触发js事件,同时跳转到锚点,有两种处理方式:

1,

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

2,

<p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->
<a href="#" onclick="document.getElemetnById(‘pNode‘).scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a> 

 参考博客: html中的锚点介绍和使用

 html 页面内锚点定位及跳转方法总结

 

css中的锚点

标签:http   处理   通过   nod   事件   pre   turn   col   als   

原文地址:https://www.cnblogs.com/qianxunpu/p/8328262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!