3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-02 02:42:41 +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 clsx from 'clsx';
import {useLocation} from '@docusaurus/router';
import useScrollPosition from '@theme/hooks/useScrollPosition';
import styles from './styles.module.css';
@ -66,38 +67,42 @@ function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
}
function BackToTopButton(): JSX.Element {
const location = useLocation();
const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
const [show, setShow] = useState(false);
useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
// No lastPosition means component is just being mounted.
// Not really a scroll event from the user, so we ignore it
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);
useScrollPosition(
({scrollY: scrollTop}, lastPosition) => {
// No lastPosition means component is just being mounted.
// Not really a scroll event from the user, so we ignore it
if (!lastPosition) {
return;
}
} else {
setShow(false);
}
}, []);
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 {
setShow(false);
}
},
[location],
);
return (
<button
@ -105,7 +110,6 @@ function BackToTopButton(): JSX.Element {
[styles.backToTopButtonShow]: show,
})}
type="button"
title="Scroll to top"
onClick={() => smoothScrollTop()}>
<svg viewBox="0 0 24 24" width="28">
<path

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

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