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

标题处理、标签页分页处理

Browse Source
This commit is contained in:
tangly1024
2021-10-16 15:26:09 +08:00
parent bca507029c
commit 3d70843441
12 changed files with 205 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/JumpToTop.js
View File

@@ -33,20 +33,25 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
}, [show])
return (
<div
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' rounded-full animate__animated animate__faster shadow-xl'}>
<div
style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
{showPercent && (
<div style={{ backgroundColor: 'rgb(56, 144, 255)' }} className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
<span>{percent}%</span>
</div>
)}
<div className='text-2xl'>
<a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
title={locale.POST.TOP} />
<div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
<div className='flex-wrap'>
<div
className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' rounded-full animate__animated animate__faster shadow-xl'}>
<div
style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
{showPercent && (
<div style={{ backgroundColor: 'rgb(56, 144, 255)' }}
className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
<span>{percent}%</span>
</div>
)}
<div className='text-2xl'>
<a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
title={locale.POST.TOP} />
</div>
</div>
</div>
</div>
</div>