React页面点击悬浮按钮滑动定位到页面顶部

前言

一、添加悬浮按钮

二、设置滑动的目标

三、给悬浮按钮添加点击事件

---

前言

Web页面上，当某个页面内容特别多，下拉到底部的时候，想再返回页面顶部就得鼠标滚轮滑好多下，或者没有鼠标的话操作就更麻烦了。

这个时候页面右下角往往会放一个悬浮按钮，点击按钮立即滑动到页面顶部，就方便了很多。本文就是此功能的一个简单的实现。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、添加悬浮按钮

在布局文件里加上这个按钮：

        <img 
          alt="top" 
          src={IcoTop} 
          style={{
            position: "fixed",
            cursor: "pointer",
            right: "60px",
            bottom: "60px",
            zIndex: 99
          }}
          onClick={()=>scrollToAnchor("page-top", true)}
        />

上面的代码里，IcoTop是自定义的一个图标，你可以替换为自己需要的图片地址。

position: fixed 设置按钮的定位方式为基于浏览器窗口定位。这样不管页面滑动到什么位置，这个按钮始终显示在右下角，距离右边和底部60px。zIndex设置了优先级，设置大一点，保证不会被页面其他内容遮挡住。

二、设置滑动的目标

在页面最顶部的布局里，给某个控件设置一个id，或者添加一个带id的div。代码如下：

<div id="page-top"/>

必须要设置id，因为我们需要通过id来找到这个div，从而确定页面会滑动到这个div所在的位置。

---

三、给悬浮按钮添加点击事件

第一步其实我们已经添加过点击事件了： 

onClick={()=>scrollToAnchor("page-top", true)}

下面是点击事件的代码示例：

/**
* anchorName: 滑动的目标位置的id
* smooth: 滑动时是否有过渡动画效果
*/
const scrollToAnchor = (anchorName:string, smooth: boolean) => {
  if (anchorName) {
    const anchorElement = document.getElementById(anchorName);
    if (anchorElement) {
      anchorElement.scrollIntoView({block: 'start', behavior: smooth? 'smooth': 'auto'});
    }
  }
}

这样功能就完成了。如果想跳转到页面其他指定位置，也可以按照这样的实现，只要把顶部的锚点div移动到指定位置即可。