html5end锚点,页面如何做锚点?
最近项目中有一个需求,弹窗的表格列表需要自动定位到当前已选的行,实现之后顺带归总以下锚点有哪些实现方法。
1、window.location.hash
1.1、#的涵义
很多同学应该不了解hash,下面简单说说hash的作用:
#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,http://www.example.com/index.html#print
就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。
为网页位置指定标识符,有两个方法。一是使用锚点,比如,二是使用id属性,比如
1.2、HTTP请求不包括#
#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。
比如,访问下面的网址,http://www.example.com/index.html#print
浏览器实际发出的请求是这样的:GET **/index.html** HTTP/1.1
Host: www.example.com
可以看到,只是请求index.html,根本没有"#print"的部分。
1.3、#后的字符
在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
比如,下面URL的原意是指定一个颜色值:http://www.example.com/?color=#fff
但是,浏览器实际发出的请求是:GET **/?color=** HTTP/1.1
Host: www.example.com
可以看到,"#fff"被省略了。只有将#转码为%23,浏览器才会将其作为实义字符处理。也就是说,上面的网址应该被写成:http://example.com/?color=%23fff
1.4、改变#不触发网页重载
单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从http://www.example.com/index.html#location1
改成http://www.example.com/index.html#location2
浏览器不会重新向服务器请求index.html。
1.5、改变#会改变浏览器的访问历史
每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。
这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。
值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。
1.6、window.location.hash读取#值
window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
1.7、onhashchange事件
这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种:window.onhashchange = func;
window.addEventListener("hashchange", func, false);
对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。
1.8、页面如何使用hash锚点呢?
弹出弹窗时,表格列表自动定位到id=011的那一行。实现方式很简单,只要在id=011的那一行数据的元素中加入一个id,然后在useEffect页面初始化时window.location.hash = 刚才的设置的id,具体实现如下:import React, { useEffect, useState } from 'react';
import { RouteConfigComponentProps } from 'react-router-config';
import MainStore from '../../store/MainStore';
import { inject, observer } from 'mobx-react';
import { Modal, Table } from 'antd';
import data from '../data';
import styles from './index.module.scss';
interface IProps extends RouteConfigComponentProps {
mainStore?: MainStore;
}
const TableCom = (props: IProps) => {
const { mainStore } = props;
const { visible, setVisible } = mainStore as MainStore;
useEffect(() => {
window.location.hash = 'anchor';
})
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
render: (text: any) => {
return
}
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 80,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: '学校',
dataIndex: 'school',
key: 'school',
width: 150
},
{
title: '身高',
dataIndex: 'height',
key: 'height',
width: 80,
},
]
return (
title="列表"
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
width={600}
>
columns={columns}
dataSource={data}
pagination={false}
scroll={{y: 200}}
rowClassName={(record, index) => record.id === '011' ? `${styles.bgColor}` : ''}
>
)
}
export default inject('mainStore')(observer(TableCom));
效果如下:
2、scrollIntoView
html5新增api,可以定位到滚动容器可视区域或者滚动区域正中间,可以设置滚动滑动效果,但存在浏览器兼容性。具体用法传送门:https://developer.mozilla.org...
具体实现如下:import React, { useEffect, useState } from 'react';
import { RouteConfigComponentProps } from 'react-router-config';
import MainStore from '../../store/MainStore';
import { inject, observer } from 'mobx-react';
import { Modal, Table } from 'antd';
import data from '../data';
import styles from './index.module.scss';
interface IProps extends RouteConfigComponentProps {
mainStore?: MainStore;
}
const TableCom = (props: IProps) => {
const { mainStore } = props;
const { visible, setVisible } = mainStore as MainStore;
const [anchor, setAnchor] = useState(null);
useEffect(() => {
if (anchor) {
anchor.scrollIntoView({block: 'end'});
}
// 或者
// const anchor = document.getElementById('anchor');
// anchor?.scrollIntoView({block: 'end'})
})
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
render: (text: any) => {
return
ref={(el) => {
if(text === '011') {
setAnchor(el)
}
}}>text
}
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 80,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: '学校',
dataIndex: 'school',
key: 'school',
width: 150
},
{
title: '身高',
dataIndex: 'height',
key: 'height',
width: 80,
},
]
return (
title="列表"
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
width={600}
>
columns={columns}
dataSource={data}
pagination={false}
scroll={{y: 200}}
rowClassName={(record, index) => record.id === '011' ? `${styles.bgColor}` : ''}
>
)
}
export default inject('mainStore')(observer(TableCom));
效果:
可以看到scrollIntoView锚点的行为更加准确。
3、scrollTop、offsetTop
操作dom进行锚点是一种最常见方式,这里不进行描述。
html5end锚点,页面如何做锚点?相关推荐
- 锚文本链接用html怎么做,锚文本链接是什么?
锚文本链接,简称锚文本,又叫关键词链接,是链接的一种展现形式. 锚文本和超链接类似,超链接是直接链接形式,如 https://www.seowhy.com/a/227.html 锚文本是给一个关键词做 ...
- html页面怎么加锚点,html页面添加锚点
锚点即指html中的链接,在页面中适当的添加锚点可以大大提高阅读或查找效率,尤其是一些内容分类繁多的页面. 添加锚点的方式有以下: (1)根据锚点文本标签的id属性设置,通过a标签定位: 段落一 段落 ...
- 网优谷告诉你:锚文本链接怎么做
网优谷告诉你:锚文本链接怎么做 我们在做网站优化时经常会说到锚文本链接,那么什么是锚文本链接呢,锚文本链接有哪些注意事项,以及怎么做锚文本链接呢? 网优谷来讲一下锚文本链接的相关问题,所谓的锚文本链接 ...
- html页面滚动 锚点,页面实现锚点滚动的滑动效果
实现锚点滚动,需要两个方面的因素:1,锚,即我们点击的地方.2,目标位置,即页面需要滚动的距离. 1 锚点 anchor 通俗的讲就是导航,如百度百科的 我们可以点击右侧的锚点,从而使得页面滚动到指定 ...
- 锚点定位——如何设置锚点居页面顶部距离,锚点定位并距离顶部一定偏移
锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建 ...
- php 随机在文章中添加锚文本_SEO站长布局锚文本时的7大注意事项
通过对什么是锚文本链接.锚文本作用的讲解,以及怎样布局网站站内锚文本的介绍.相信大家都有了比较清晰的认识,也会重视网站锚文本的建设.但是菜鸟菌还是不得不再啰嗦点,锚文本虽然好处大大的,在布局锚文本的时 ...
- html命名锚记链接失败,命名锚记(设置命名锚记超级链接)
在Dreamweaver中命名锚记的英文是anchor,中文意思为"锚",意指其功能像船的锚一样,能迅速下沉并且定位.(1)将光标移至需要插入锚记的段落标题前,选择"插. ...
- 在html中什么叫锚点,html中的锚点介绍和使用
以下资料整理自网路 1.锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标 ...
- router锚点和html锚点,react-router 环境使用锚点的方法
锚点是通过在界面中增加一些特征(比如 id),然后在 URL 地址后面加上 #id 就可以访问到指定页面的指定位置,这样可以让我们快速跳转到页面的某个位置,但是在 react-router 中这种方法 ...
最新文章
- 深度干货!如何将深度学习训练性能提升数倍?
- 深度学习将眼睛变成健康“指示器”
- 【游戏开发备注之二】配置Xcode版本控制SVN详细步骤内含部分问题解决方案
- 数据结构 图的定义
- Qt控制台输出QString
- 【POJ2117】Electricity [tarjan 割点]
- linux 6.7 nfs安装yum,centos6.7下安装配置NFS
- Hybris Commerce里的持久层
- 【自动驾驶】一文读懂自动驾驶汽车产业链上下游
- WSPSRV.EXE错误导致ISA中断
- 拼团商城小程序高保真原型模板、支付、优惠券、客服、物流、收藏、足迹、优惠券、订单管理、评价、设置、地址、售后、拼团、消息通知、商城小程序、电商小程序、拼团电商、移动端电商、高保真电商、电商app
- gitee合并分支_Gitee在线解决代码冲突功能上线,无需手动修改轻松解决冲突
- 傅里叶光学 matlab,基于MATLAB的傅里叶光学实验的计算机模拟
- Vim安装gruvbox配色教程,切换黑暗模式
- matlab剪切板中内容清除,清除剪贴板的内容
- HAU寒假训练第一周
- xshell 运行python脚本
- [eNSP]→ospf基本配置、区域划分
- HCIP-H12-221练习题
- 网页编码与数据传递中的中文字符编码
热门文章
- Linux Code Push环境搭建
- 手机(小米系列)不能安装mitmproxy 证书怎么办
- Android进程保活方案的几种方案
- C++数字华容道,免费复制
- 在java商城开发中map集合的应用
- 数字的计算机表达--大小端和浮点数
- Ubuntu系统中/usr/share/applications/目录下都是.desktop文件没有快捷方式
- 协同过滤推荐算法和基于内容推荐算法的区别?
- 苹果笔记本怎么安装python_苹果系统MAC下如何安装Python解释器
- 揭秘Win7 下WinSXS超大文件夹