网站文章超链接如何定位到当前页面固定位置?

楚狂人

发表文章数:746

云服务器102元

新用户专享福利

个人上云

1核 2G 1M

突发性能型T5

带宽1-5M可选

适合入门级用户

¥102/年

热门标签

,
首页 » 网站源码 » 正文

最近发现一个很有趣的建站小技巧,就是让网页内容实现超链接定位到当前页面的固定位置,也就是当前页跳转。经过了解之后发现这有一个专业名词叫“ 锚点定位”,关于锚点定位,好像实现的方式还蛮多的,我收集整理到这里,毕竟以后自己建站可能用得到。

1、a标签定位

在准备定位位置 插入锚点,<a name=”a1>定位点</a>
然后加一个超链接 <a href=”#a1″>到定位点</a>

2、div定位

<div id=”mark”>定位点</div>
比如上面的html代码,在点击A链接后页面显示的位置自动跳到id=”mark”的div处,实现方式如下:
<a href=”#mark”>到定位点</a>

3、JS定位:

<div class=”button”><a href=”#aaa”>定位点</a></div>
跳转指定位置标签

<div class=”div1″ id=”aaa”>到定位点</div>

js部分:

<script>
window.location.hash = “#aaa”; // #aaa为锚点名称
</script>

不过对我们来说,其实只要掌握一种方法就够用了,我比较青睐第一种,毕竟它最简单。

此处为测试 锚点定位,点击文章开头的锚点定位,就会跳转到这里。

转载请注明:作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《网站文章超链接如何定位到当前页面固定位置?》 发布于2020-07-12

分享到:
赞(1) 打赏 生成海报

评论 抢沙发

1 + 2 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

每天拆双十一超级红包
双十一超级红包 1111
切换登录

注册