跨网页实现HTML网页内部锚文本跳转功能代码

- 编辑:慢熊科技 -

标题比较绕口,我们在内容里面明白点说。我们知道,在网页内部使用#锚文本可以实现,点击#锚文本链接之后,会在当前网页西跳转到已安装锚点的位置。这点我们在“回到顶部”、“联系电话”等等需要直接定位或者目录定位的功能上运用的比较多。这是在同一网页同一窗口实现的,但是如果我们需要跨网页去运用这一功能该怎么办呢?
跨网页锚文本定位
我们先看一看网页内部锚文本跳转功能的代码:
1. 使用a标签。代码如下:<a href=”#maowenben”>锚点到这里</a>我们设置了这个锚点代码之后,在当前页面只需要访问“/#maownben”即可跳转到锚点。
2. 使用div标签。代码如下:<div id=”maowenben”>锚点在这里</div>,这个代码同样可以实现第一点中所描述的访问“/#maownben”即可跳转到锚点的功能。当然这段div标签代码不同的地方在于他不需要在锚点标记(maowenben)前面添加一个#代码,代码中的“id”本身就充当了这个角色,但是连接的网址还是要加#的、
上面,我们通过两端代码实现了当前同一个网页内部实现锚文本跳转定位,现在,我们来看看如果跨网页来实现这个问题。
其实非常简单,直接访问完全体网址即可,即:http://wangzhi/#maowenben。为什么会这么简单呢?我们在做好这个锚文本之后,把鼠标放到锚文本上方,不要去点击他,这时我们可以在浏览器的左下角的链接显示栏里面发现他的网址,就是这么简单的。所以大家想实现跨网页访问,直接写好代码之后,访问完全体网址即可。
完全体网址
相关拓展:当网页比较上的情况,我们会使用“回到顶部”功能,在当前页面做一个锚文本定位到最顶部。在有了跨网页毛文档跳转定位功能,之后,我们还可以将“回到顶部”功能改成“回到首页”、“回到首页顶部”等功能,这样是不是很使用呢?
以上就是跨网页实现HTML网页内部锚文本跳转功能代码及拓展信息,供大家参考。
珠海
2018.7.30