d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-31 23:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize theme

Browse Source
This commit is contained in:
tangly1024
2023-03-08 21:50:08 +08:00
parent 6033d08890
commit ff8ae782b7
20 changed files with 131 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
themes/simple/components/JumpToTopButton.js
View File

@@ -11,8 +11,24 @@ import React from 'react'
*/
const JumpToTopButton = () => {
const { locale } = useGlobal()
return <div title={locale.POST.TOP} className='cursor-pointer p-2 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
><i className='fas fa-angle-up text-2xl' />
const [show, switchShow] = React.useState(false)
const scrollListener = () => {
const scrollY = window.pageYOffset
const shouldShow = scrollY > 200
if (shouldShow !== show) {
switchShow(shouldShow)
}
}
React.useEffect(() => {
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return <div title={locale.POST.TOP}
className={(show ? ' opacity-100 ' : 'invisible opacity-0') + ' transition-all duration-300 flex items-center justify-center cursor-pointer bg-black h-10 w-10 bg-opacity-40 rounded-sm'}
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
><i className='fas fa-angle-up text-white ' />
</div>
}