【第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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

前端学习 第3周 第2天

8020
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1.2K10
来自专栏我的博客

JQuery事件处理

Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

32650
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

63160
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

60750
来自专栏Golang语言社区

Golang语言 -并行程序

go在设计的时候,就有针对并行的语法 —-channel 和goroutine 前者 可以很方便的进行消息和数据传递,在取数据和拿数据的时候可以不用关心底层实现...

39360
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

19410
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

21220
来自专栏web开发

原生js实现简单移动端轮播图

最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里。还有很多不足的地方,希望多多...

1K60
来自专栏九彩拼盘的叨叨叨

学习前端 第1周第2天

9920

扫码关注云+社区

领取腾讯云代金券