3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-05 12:22:45 +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

62
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,38 +67,42 @@ 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(
// No lastPosition means component is just being mounted. ({scrollY: scrollTop}, lastPosition) => {
// Not really a scroll event from the user, so we ignore it // No lastPosition means component is just being mounted.
if (!lastPosition) { // Not really a scroll event from the user, so we ignore it
return; if (!lastPosition) {
} return;
const lastScrollTop = lastPosition.scrollY;
const isScrollingUp = scrollTop < lastScrollTop;
if (!isScrollingUp) {
cancelScrollToTop();
}
if (scrollTop < threshold) {
setShow(false);
return;
}
if (isScrollingUp) {
const documentHeight = document.documentElement.scrollHeight;
const windowHeight = window.innerHeight;
if (scrollTop + windowHeight < documentHeight) {
setShow(true);
} }
} else { const lastScrollTop = lastPosition.scrollY;
setShow(false);
} const isScrollingUp = scrollTop < lastScrollTop;
}, []);
if (!isScrollingUp) {
cancelScrollToTop();
}
if (scrollTop < threshold) {
setShow(false);
return;
}
if (isScrollingUp) {
const documentHeight = document.documentElement.scrollHeight;
const windowHeight = window.innerHeight;
if (scrollTop + windowHeight < documentHeight) {
setShow(true);
}
} else {
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;
} }