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-组件-列表渲染优化
101 0
|
3月前
|
前端开发 JavaScript API
React 列表 & Keys
10月更文挑战第9天
22 0
|
3月前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
6月前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
65 1
|
8月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
80 0
|
8月前
|
存储 前端开发
构建一个简单的React待办事项列表应用
构建一个简单的React待办事项列表应用
61 0
|
8月前
|
前端开发 JavaScript
【边做边学】利用React创建交互式ToDo列表
【边做边学】利用React创建交互式ToDo列表
|
前端开发
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
90 0
|
前端开发
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
74 0
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
99 9