用A标签实现页面内容定位 点击链接跳到具体位置

  经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。

  首先用A标签定义目录的链接。

<a href="#hudong">互动</a>

   然后在具体位置调用A标签,本例位置在“※ 微信营销之互动 ※”

<a name="hudong"></a>

   保存,刷新,测试一下,点击目录链接是不是可以跳到那个位置了?用A标签实现页面内容定位,点击链接就能跳到具体位置,简单吧?

  w3school对【HTML 链接 - name 属性】的定义

name 属性规定锚(anchor)的名称。 您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示,它对读者是不可见的。 当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

微信小程序开发思路

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路 下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解 整...

3738
来自专栏Maroon1105

WordPress之去掉顶部工具栏

用WP搭建自己博客的人都会发现网站上面有一个黑色的工具栏,影响网站美观度,那么怎么去掉顶部工具栏呐?

4920
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

1302
来自专栏Jackson0714

【网站开发】在新浪SAE上搭建一个博客

3165
来自专栏DeveWork

DeveWork.com 上线“前端工具箱”(附源码下载)

昨晚的时候本站上线了“前端开发工具箱”,传送门:http://devework.com/tool,上面的导航栏也有入口。目前有CSS压缩/格式化/属性排序、在线...

2389
来自专栏DeveWork

Google Chrome 浏览器 开发者工具 使用教程

对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Netwo...

4246
来自专栏.Net移动开发

Smobiler 4.0 正式发布

883
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

1212
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

4238
来自专栏每日一篇技术文章

weex-06-程序的入口文件app.js

app.js 这个是我们打包时的入口文件,为什么这样说呢?我们看一下打包配置文件webpack.config.json中的部分内容

2982

扫码关注云+社区

领取腾讯云代金券