react使用锚点,页面滚动(跳转)指定位置

在React中,由于其特性,原生锚点无法直接使用。本文介绍如何手动实现锚点功能,通过获取DOM元素并模拟跳转,提供与原生锚点相似的体验。在点击跳转时,React使用的是编程方式而非直接跳转。示例场景包括一个吸顶tabbar效果,需要考虑元素高度并结合滚动插件,以提升用户体验。
摘要由CSDN通过智能技术生成

react使用锚点

在react中,原生的锚点是不可以使用的,因此需要手动判断和取DOM元素
使用的方法和原生的锚点基本类似,唯一不同的是在点击跳转的时候,react使用的是写的方法,原生是直接跳转到相对应位置

  1. 下面上代码进行对比
<div id={
   'tab-bar'}>
  <Button inline onClick={
    () => this.scrollToAnchor('a', true)}>1</Button>
  <Button inline onClick={
    () => this.scrollToAnchor('b') } name={
   '#b'}>2</Button>
  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值