d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

回顶回底逻辑改变

Browse Source
This commit is contained in:
tangly1024
2022-01-07 11:15:29 +08:00
parent 7fce591750
commit b1d23592f8
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/JumpToBottomButton.js
View File

@@ -13,16 +13,17 @@ import smoothscroll from 'smoothscroll-polyfill'
* @returns {JSX.Element}
* @constructor
*/
const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
const JumpToBottomButton = ({ showPercent = false }) => {
if (!BLOG.widget?.showToBottom) {
return <></>
}
const targetRef = typeof window !== 'undefined' ? document.getElementById('wrapper') : undefined
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0)
const scrollListener = () => {
// 处理是否显示回到顶部按钮
const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
@@ -33,6 +34,11 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
}
changePercent(per)
}
function scrollToBottom () {
window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' })
}
useEffect(() => {
smoothscroll.polyfill()
@@ -40,8 +46,8 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
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' })}
return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 z-20'>
<div onClick={() => scrollToBottom()}
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 duration-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowDown} />

6
components/JumpToTopButton.js
View File

@@ -13,21 +13,21 @@ import BLOG from '@/blog.config'
* @returns {JSX.Element}
* @constructor
*/
const JumpToTopButton = ({ targetRef, showPercent = false }) => {
const JumpToTopButton = ({ showPercent = false }) => {
if (!BLOG.widget?.showToTop) {
return <></>
}
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0)
const targetRef = typeof window !== 'undefined' ? document.getElementById('wrapper') : undefined
const scrollListener = () => {
// 处理是否显示回到顶部按钮
const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
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 && scrollY < windowTop
const shouldShow = scrollY > 100 && per > 0
if (shouldShow !== show) {

4
layouts/BaseLayout.js
View File

@@ -69,8 +69,8 @@ const BaseLayout = ({
</main>
<Footer title={meta.title}/>
<JumpToTopButton targetRef={targetRef} showPercent={false} />
<JumpToBottomButton targetRef={targetRef} showPercent={false}/>
<JumpToTopButton showPercent={false} />
<JumpToBottomButton showPercent={false}/>
<FloatDarkModeButton/>
</>
)