react 商品列表返回顶部

简介: react 商品列表返回顶部

需求:在点击按钮时,将商品列表信息到达顶部

实例:

20230507_194641

 

//返回顶部
  const ftop = () => {
    const scrollToButton = document.querySelector('.ftop');
    const targetElement = document.querySelector('.seared');
    scrollToButton.addEventListener('click', function () {
      const targetElementRect = targetElement.getBoundingClientRect();
      window.scrollTo({
        top: targetElementRect.top + window.scrollY,
        left: targetElementRect.left + window.scrollX,
        behavior: 'smooth'
      });
    });
  }
return(
     <div className='seared'>
        <div>111</div>
        <div>111</div>
        <div>111</div>
         <div className="ftop"><h2><BackTop onClick={ftop} /></h2></div>
     </div>
)

 

 

相关文章
|
前端开发 算法 JavaScript
React-组件-内联样式 和 React-组件-列表渲染优化
React-组件-内联样式 和 React-组件-列表渲染优化
95 0
|
2月前
|
前端开发 JavaScript API
React 列表 & Keys
10月更文挑战第9天
17 0
|
2月前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
5月前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
51 1
|
7月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
66 0
|
7月前
|
存储 前端开发
构建一个简单的React待办事项列表应用
构建一个简单的React待办事项列表应用
57 0
|
7月前
|
前端开发 JavaScript
【边做边学】利用React创建交互式ToDo列表
【边做边学】利用React创建交互式ToDo列表
|
前端开发
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
83 0
|
前端开发
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
67 0
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
378 0