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 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

1808
来自专栏web前端

05移动端事件

一、移动端三大事件          1、手指按下     ontouchstart      2、手指触摸     ontouchmove          ...

1975
来自专栏姬小光

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

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

1033
来自专栏Youngxj

CSS3随机背景图片切换特效

5766
来自专栏微信小程序开发

小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

49110
来自专栏marsggbo

li浮动时ul高度为0,解决ul自适应高度的几种方法

内容提要:   li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中...

2137
来自专栏smy

解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :...

3187
来自专栏编程微刊

clientX和clientY 事件属性的使用

做项目中遇到一个这样的需求,点击属性菜单节点,出现显示框,显示框的位置随着鼠标点击的位置距离而改变。

1511
来自专栏cnblogs

bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3...

2048
来自专栏vue学习

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

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

1482

扫码关注云+社区