HTML锚点

        以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设用到了锚点,现在总结一下控制锚点的几种情况:

        1. 在同一页面中

<a name="add"></a><!-- 定义锚点 -->
<a href="#add">跳转到add</a>

        2. 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点

<a href="a.html#add">跳转到a.add</a>

        3. 点击链接触发js事件,同时跳转到锚点,有两种处理方式:

        第一种:

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

        第二种:

<div id="divNode"><!-- contents --></div><!-- 假设一个需要跳转到的节点 -->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java奇淫巧技之Lombok

    背景   我们在开发过程中,通常都会定义大量的JavaBean,然后通过IDE去生成其属性的构造器、getter、setter、equals、hashcode、...

    高爽
  • Flex回调函数

            首先要说明一下什么是回调函数?有什么作用?         回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一...

    高爽
  • Session深度解析

    第 1 章 简介 1. 广义的session        中文名称会话,Http客户端和Http服务器开始通信,就会产生会话,会话过程是可以连续的,也可以是时...

    高爽
  • 奢侈品官网类Web原型制作分享-CHANEL

    CHANEL是知名的女性奢侈品品牌,网站原型以大图排版为主,配色方面也是采用经典的黑白灰,

    奔跑的小鹿
  • 教育平台项目后台管理系统:课程信息模块

    逻辑删除:逻辑删除的本质是修改操作,所谓的逻辑删除其实并不是真正的删除,而是在表中将对应的是否删除标识做修改操作;比如 0 是未删除,1 是删除;在逻辑上数据是...

    RendaZhang
  • 小程序自动化测试总结

    微信小程序生态日益完善,很多小程序项目页面越来越多,结构越来越复杂,业务逻辑也更加多样。以腾讯课堂小程序为例,目前腾讯课堂小程序部分页面结构和不同业务场景下的表...

    IMWeb前端团队
  • 如何交换PDF页面?PDF文件的页面位置怎么交换

    收到读者大大的回复,提到PDF文件交换页面,也不知道要干嘛用,但是既然读者大大提到了,肯定是在某个时刻需要这个操作,如何交换PDF页面?PDF文件的页面位置怎么...

    用户6477319
  • Apache Kylin在绿城客户画像系统中的实践

    前言 作为国内知名的房地产开发商,绿城经过24年的发展,已为全国25万户、80万人营造了美丽家园,并将以“理想生活综合服务提供商”为目标,持续为客户营造高品质的...

    用户1263954
  • 【5+】Webview页面之间的数据交流

    A页面有个选择地区的按钮,需要打开B页面选择一个地区,然后获取到选取结果返回给A页面并展示。

    前端博客 : alili.tech
  • Apache Kylin在绿城客户画像系统中的实践

    Spark学习技巧

扫码关注云+社区

领取腾讯云代金券