From 2840e633885f9bf92ddfd62549a6f0b5fd9cc3cd Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 21 Dec 2021 17:29:34 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E6=96=B0=E5=A2=9E=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FloatDarkModeButton.js |  5 ++-
 components/JumpToBottomButton.js  | 52 +++++++++++++++++++++++++++++++
 layouts/BaseLayout.js             |  2 ++
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 components/JumpToBottomButton.js

diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index 3078d435..077e904a 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -7,7 +7,6 @@ export default function FloatDarkModeButton () {
   const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
-    // const shouldShow = scrollY > 100 && scrollY < windowTop
     const shouldShow = scrollY > 100
     if (shouldShow !== show) {
       switchShow(shouldShow)
@@ -34,8 +33,8 @@ export default function FloatDarkModeButton () {
     <div
       onClick={handleChangeDarkMode}
       className={
-        (show ? 'animate__fadeInRight ' : 'hidden lg:block') +
-        ' px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-3 bottom-36 z-10 duration-200 text-xs cursor-pointer rounded-xl' +
+        (show ? '' : 'hidden lg:block') +
+        ' animate__fadeInRight  px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-3 bottom-24 z-10 duration-200 text-xs cursor-pointer rounded-xl' +
         ' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'
       }
     >
diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
new file mode 100644
index 00000000..dbebfca2
--- /dev/null
+++ b/components/JumpToBottomButton.js
@@ -0,0 +1,52 @@
+import { useGlobal } from '@/lib/global'
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useEffect, useState } from 'react'
+import smoothscroll from 'smoothscroll-polyfill'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToBottomButton = ({ targetRef, showPercent = true }) => {
+  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 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)
+  }
+  useEffect(() => {
+    smoothscroll.polyfill()
+
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
+
+  return (<div id='jump-to-top' className='right-3 fixed flex bottom-36 duration-500 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} >
+          <FontAwesomeIcon icon={faArrowDown} />
+        </div>
+          {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
+        </div>
+      </div>
+    </div>)
+}
+
+export default JumpToBottomButton
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 1985be52..f49dc438 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -1,6 +1,7 @@
 import CommonHead from '@/components/CommonHead'
 import FloatDarkModeButton from '@/components/FloatDarkModeButton'
 import Footer from '@/components/Footer'
+import JumpToBottomButton from '@/components/JumpToBottomButton'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import LoadingCover from '@/components/LoadingCover'
 import SideAreaLeft from '@/components/SideAreaLeft'
@@ -94,6 +95,7 @@ const BaseLayout = ({
 
       <Footer title={meta.title}/>
       <JumpToTopButton targetRef={targetRef} showPercent={true} />
+      <JumpToBottomButton targetRef={targetRef} showPercent={false}/>
       <FloatDarkModeButton/>
       </div>
   )