当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题。

经过我自己的搜索目前有两种方式能够解决这个问题,为了能在 react 生态下面简单优雅的使用,我专门封装了一个锚点组件 react-anchor-without-hash,它使用了类似原生 a 标签的写法,并且可以支持滚动的距离和指定滚动的元素,尽可能的满足业务的需求。

不过在介绍这个组件之前,还是得先说一下两种基本的解决方案。

两种解决方案

scrollIntoView

scrollIntoView 方法可以让当前的元素滚动到浏览器窗口的可视区域内。

它的使用方法如下:

var element = document.getElementById("box");

element.scrollIntoView();

这个 api 兼容 IE8 及以上的浏览器,所以可以放心使用。

注:IE10 之前的 IE 浏览器部分支持,具体请查看Can I Use

scrollTop

另一个方法是使用 scrollTop 这个 api,这个方法的兼容性也是比较好的,这个方法相比于 scrollIntoView 来说需要你自己定义要滚动的元素和要滚动的高度,虽然看起来麻烦一些,但是好处是自由度比较高,试想一下下面的场景:

  • 你有一个 A 元素在 Content 里面,Content 设置了滚动,你想让 A 元素滚动到可视区域内。

  • 如果用 scrollIntoView 会变成下面这样,A 元素显示到整个浏览器视口的最上面,这样就会和 Header 重合,被遮挡住一部分。

  • 所以这时候需要使用 scrollTop 去设置 content 滚动距离,比如说是 60px,最后的效果就变成了我们想要的结果。

使用方式如下:

const cont = document.querySelector('#container');
const a = document.querySelector('#a'); cont.scrollTop = a.offsetTop + 60;

react-anchor-without-hash

以上两种方式如果想方便的在项目里面使用多少都需要封装一下,而且使用起来和原生的 a 标签形式也相差甚远。

但是如果是在 react 技术栈下,我们可以利用组件来封装一个类似 a 标签的锚点,这样在使用形式上,我们就能更接近于原生的方式,降低使用成本。

于是我写了这个 react 组件,兼容以上两种方案,让你能够非常简单的实现锚点,如果使用了该组件的话,上面的实现方式就会变成下面这样:

import Anchor from 'react-anchor-without-hash'

// ......

const anchorProps = {
type: 'scrollTop',
container: '#container',
interval: 60
} <div id="container" style={{position: 'relative', overflow: 'scroll'}}>
<Anchor name="a" {...anchorProps}>
<div>
<h2>This is a</h2>
<div>There are some text...</div>
</div>
</Anchor>
</div>

这时候你只需要在页面的地址栏输入: http://somehost/path/#hash?_to=a 页面就会让 A 滚动到你想要的位置啦!

github:https://github.com/kwzm/react-anchor-without-hash

demo:https://kwzm.github.io/react-anchor-without-hash/

codesandbox: https://codesandbox.io/embed/react-anchor-without-hash-2xq2h

欢迎讨论和Star!!!

React SPA 应用 hash 路由如何使用锚点的更多相关文章

  1. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  2. SPA中,Node路由优先级高于React路由

    一.问题描述 在一场面试中,面试官问到了React和Node路由之间的关系. 现在SPA(单页面应用)的使用越来越广. Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候 ...

  3. SPA中前端路由基本原理与实现方式

    SPA 前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...

  4. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  5. HahsRouter hash 路由

    无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...

  6. 告别 hash 路由,迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

  7. 前端hash路由基本原理,及代码的基本实现

    路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同. 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 ...

  8. hash路由

    class HashRouter{ constructor(){ //用于存储不同hash值对应的回调函数 this.routers = {}; window.addEventListener('ha ...

  9. ASP.NET .Core 集成 React SPA 应用

    AgileConfig的UI使用react重写快完成了.上次搞定了基于jwt的登录模式(AntDesign Pro + .NET Core 实现基于JWT的登录认证),但是还有点问题.现在使用reac ...

随机推荐

  1. Linux磁盘与分区

    正在从新装载虚拟机,碰到磁盘分区一阵头大,花了一下午对分区的基本原理做了一个梳理   一.磁盘   硬盘内部结构:

  2. Python用法

    Python用法 IDE IDE是集成开发环境:Integrated Development Environment的缩写. 使用IDE的好处在于按,可以把编写代码.组织项目.编译.运行.调试等放到一 ...

  3. 简介SoftICE是Compuware NuMega公司1的产品,是目前公认最好的系统级调试工具

    简介SoftICE是Compuware NuMega公司1的产品,是目前公认最好的系统级调试工具

  4. Ubuntu 下载 Eclipse + tomcat 配置

    tomcat下载 去网站下载core中的 tar.gz的文件 下载之后依然转移到/opt文件夹然后进行解压 sudo cp apache-tomcat- /opt sudo tar -zxvf apa ...

  5. Ubuntu中目录右下角的锁标志

    在ubuntu中如果是用root权限创建的目录,在普通权限下展示时则会出现一个锁的标志,表明该目录是一个受保护的目录(只读,不能写入和删除),普通权限无法对其进行操作.如用命令sudo mkdir d ...

  6. xss magic_quotes_gpc

    ---恢复内容开始--- magic_quotes_gpc函数,在php5.4以上移除了, 但是很奇怪的是  我的5.6版本这边  是可以找到这个选项的. 在php.ini文件里面,默认关闭,如果将此 ...

  7. VUE过滤器的使用 vue 时间格式化

    过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...

  8. RabbitMQ延迟消息的延迟极限是多少?

    之前在写Spring Cloud Stream专题内容的时候,特地介绍了一下如何使用RabbitMQ的延迟消息来实现定时任务.最近正好因为开发碰到了使用过程中发现,延迟消息没有效果,消息直接就被消费了 ...

  9. #!/usr/bin/env bash和#!/usr/bin/bash的比较

    #!/usr/bin/env bash和#!/usr/bin/bash的比较 stackoverflow: http://stackoverflow.com/questions/16365130/th ...

  10. 2015.11.10 asn1学习笔记

    Openssl : OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 在OpenSSL被曝出现严 ...