专栏首页姬小光【第012期】如何设置页面锚点

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

早在第二期,我们就介绍了链接元素,那么这一期我们就来说说页面中的锚点。

如何设置页面锚点

这在活动类的页面上最常用,整个页面可能是一个超大的卖场,页面的每一段作为一个“楼层”,类似盖楼的感觉,然后页面的顶部或侧面有一组可以切换的选项,点击就会跳到不同的楼层:

类似图中这种页面,就可以通过锚点来设置。下面我们具体说一下锚点元素。

锚点有两种形式,都可以实现相同的效果,只是标记锚点的方式不同。

第一种:使用 a 元素

使用 a 元素标记锚点的位置,假设你希望某个链接打开后跳到 index_02 的位置,那么就在 index_02 的位置加一个锚点:

然后在同一个文档中使用普通的链接元素,就可以跳到这个位置了:

这种方式的关键点就是,首先用带 name 的 a 确定位置,然后用带 # 的地址跳过去即可。

第二种:使用 id 属性

HTML 元素的 id 属性是可以唯一标识页面元素的,你可以给任何元素加一个 id,然后就可以通过

的方式跳到 id=“a2” 的元素的位置了,这个元素的写法类似这样:

相比之下,这种方式比第一种方式简单得多,也不需要增加多余的元素,建议都使用这种方法。

当然,你还可以用锚点跳到某个网页的指定位置,比如下面的链接就会跳到页面的第二处位置:

http://st.midea.com/act/score/index_pc.html#a2

正常情况下,页面跳到每个锚点时都会自动把当前位置拉到窗口最顶部。

还有一种比较常见的情况,就是页面中靠下的几个锚点,跳过去的时候可能不会自动滚到页面的顶部。

这是因为页面的长度可能已经到头了,页面的底部不会自动拉出空白,锚点被页面底部“拽”住了。

如果感兴趣的话,可以去观察一下百度百科,几乎都是锚点的形式:

本文分享自微信公众号 - 姬小光(hi-laser),作者:有个网友名叫

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-07-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么页面跟设计稿差距这么大

    在互联网产品的研发流程中,页面的视觉还原是很重要的一个步骤,也往往是问题最多的一个环节。如果一些细节问题在这个环节没有被有效地发现并解决,那么后续流程中再去解决...

    姬小光
  • 运营同学如何防止活动中系统扑街 ?

    运营同学搞活动,最不希望看到的,恐怕就是系统扑街了。这种事情似乎没什么办法,公司程序员水平太次,总拖后腿,我能怎么办?我也很为难啊。其实,这事未必都是程序员的锅...

    姬小光
  • 姬小光前端兴趣班【第008期】- 真正的切图大法

    上一期我们使用了 word 转存大法来生成网页,主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

    姬小光
  • apicloud api.openwin

    若window已存在,则会把该window显示到最前面,同时若url有变化或者reload参数为true时,页面会重新加载。若当前正在进行openWin、clo...

    yaphetsfang
  • 微信小程序|页面的生命周期函数onLoad

    相信小程序的初学者对js页面是很模糊的总感觉看不懂,其实js页面总的来说就是一个Page()函数。用Page()函数来注册一个页面,接受一个object参数,实...

    算法与编程之美
  • C#-Xamarin的Activity传值与Fragment引用

    我们学习任何一个新框架时,肯定都需要学习它的子页面用法,因为子页面是封装公共内容最好的容器。

    Kiba518
  • MyBatis(2)——MyBatis 深入学习

    编写日志输出环境配置文件 在开发过程中,最重要的就是在控制台查看程序输出的日志信息,在这里我们选择使用 log4j 工具来输出: 准备工作: 将【MyBati...

    我没有三颗心脏
  • jquery 介绍

    引入jquery: <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    用户5760343
  • 用神经网络对页面登录进行多参数优化的小妙招

    我很乐意分享我用神经网络对页面登录进行多参数优化的一些实验。我想到这个点子已经有半年了,而且我发现从自动操作这个角度来看它十分有趣。A/B 测试会消耗市场专家...

    AI研习社
  • Marcos Lopez de Prado:金融机器学习的10大应用

    Marcos Lopez de Prado,想必国内的读者这几年应该熟悉一些了吧!

    量化投资与机器学习微信公众号

扫码关注云+社区

领取腾讯云代金券