jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: should use display to control display state of scroll top button

Browse Source
This commit is contained in:
llovvoll 2022-01-04 10:09:54 +08:00
parent f9503d8c85
commit 759f33d73c
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/ScrollTopAndComment.js
View File

@ -22,12 +22,13 @@ const ScrollTopAndComment = () => {
document.getElementById('comment').scrollIntoView()
}
return (
<div className="fixed flex-col hidden gap-3 right-8 bottom-8 md:flex">
<div
className={`fixed flex-col hidden gap-3 right-8 bottom-8 ${show ? 'md:flex' : 'md:hidden'}`}
>
<button
aria-label="Scroll To Comment"
type="button"
onClick={handleScrollToComment}
style={{ opacity: show ? 1 : 0 }}
className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300"
>
<svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
@ -42,7 +43,6 @@ const ScrollTopAndComment = () => {
aria-label="Scroll To Top"
type="button"
onClick={handleScrollTop}
style={{ opacity: show ? 1 : 0 }}
className="p-2 text-gray-500 transition-all bg-gray-200 rounded-full dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-300"
>
<svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">