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

feature:

Browse Source 
添加大量可配置项
This commit is contained in:
tangly1024
2022-01-04 11:15:23 +08:00
parent 5a34ff2f05
commit ef3a5dffe2
21 changed files with 154 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/JumpToBottomButton.js
View File

@@ -1,3 +1,4 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -13,6 +14,9 @@ import smoothscroll from 'smoothscroll-polyfill'
* @constructor
*/
const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
if (!BLOG.widget?.showToBottom) {
return <></>
}
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0)
@@ -36,15 +40,13 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div id='jump-to-top' className='right-3 fixed flex bottom-36 duration-500 z-20'>
return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 z-20'>
<div onClick={() => window.scrollTo({ top: targetRef.current.clientHeight, behavior: 'smooth' })}
className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-xl glassmorphism py-3 cursor-pointer '}>
<div className='text-center'>
<div className='w-10 dark:text-gray-200 transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
className={(show ? '' : 'hidden') + ' animate__fadeInRight duration-500 animate__animated animate__faster glassmorphism flex justify-center items-center w-8 h-8 cursor-pointer '}>
<div className='dark:text-gray-200 transform hover:scale-150 text-xs' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowDown} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
</div>
</div>
</div>)
}