前言
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移动到指定位置即可。