3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 12:52:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: various fixes back-to-top button (#5419)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-08-26 15:27:54 +03:00 • committed by GitHub
parent 493225a3c6
commit 03f8cab5e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx
View file

@ -7,6 +7,7 @@
import React, {useRef, useState} from 'react'; import React, {useRef, useState} from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import {useLocation} from '@docusaurus/router';
import useScrollPosition from '@theme/hooks/useScrollPosition'; import useScrollPosition from '@theme/hooks/useScrollPosition';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -66,10 +67,12 @@ function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
} }
function BackToTopButton(): JSX.Element { function BackToTopButton(): JSX.Element {
const location = useLocation();
const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop(); const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
useScrollPosition(({scrollY: scrollTop}, lastPosition) => { useScrollPosition(
({scrollY: scrollTop}, lastPosition) => {
// No lastPosition means component is just being mounted. // No lastPosition means component is just being mounted.
// Not really a scroll event from the user, so we ignore it // Not really a scroll event from the user, so we ignore it
if (!lastPosition) { if (!lastPosition) {
@ -97,7 +100,9 @@ function BackToTopButton(): JSX.Element {
} else { } else {
setShow(false); setShow(false);
} }
}, []); },
[location],
);
return ( return (
<button <button
@ -105,7 +110,6 @@ function BackToTopButton(): JSX.Element {
[styles.backToTopButtonShow]: show, [styles.backToTopButtonShow]: show,
})} })}
type="button" type="button"
title="Scroll to top"
onClick={() => smoothScrollTop()}> onClick={() => smoothScrollTop()}>
<svg viewBox="0 0 24 24" width="28"> <svg viewBox="0 0 24 24" width="28">
<path <path

2
packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css
View file

@ -29,7 +29,7 @@
transform: scale(0); transform: scale(0);
} }
.backToTopButton:hover { .backToTopButton:not(:focus):hover {
opacity: 0.8; opacity: 0.8;
} }