File size: 1,725 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import { useEffect, useState } from 'react'
import CONFIG from '../config'
import { siteConfig } from '@/lib/config'
/**
* 跳转到网页顶部
* 当屏幕下滑500像素后会出现该控件
* @param targetRef 关联高度的目标html标签
* @param showPercent 是否显示百分比
* @returns {JSX.Element}
* @constructor
*/
const JumpToBottomButton = ({ showPercent = false }) => {
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0)
useEffect(() => {
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
const scrollListener = () => {
const targetRef = document.getElementById('wrapper')
const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
if (shouldShow !== show) {
switchShow(shouldShow)
}
changePercent(per)
}
function scrollToBottom () {
const targetRef = document.getElementById('wrapper')
window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' })
}
if (!siteConfig('NEXT_WIDGET_TO_BOTTOM', null, CONFIG)) {
return <></>
}
return (<div className='flex space-x-1 transform hover:scale-105 duration-200 py-2 px-3' onClick={scrollToBottom} >
<div className='dark:text-gray-200' >
<i className='fas fa-arrow-down' />
</div>
{showPercent && (<div className='dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
</div>)
}
export default JumpToBottomButton
|