FIX: Scroll enough to show topic timeline from down arrow

This fixes the problem where if you clicked the down / scroll
to bottom arrow at the top of the table of contents, the scroll
would _just_ not quite be enough to show the topic timeline,
which would require another mouse scroll.

Now if there is a second post we just scroll directly to the
top of that, which makes the topic timeline show immediately.
This commit is contained in:
Martin Brennan 2024-01-31 11:45:56 +10:00
parent f8b8c2b765
commit 5537bdffbf
No known key found for this signature in database
GPG Key ID: BD981EFEEC8F5675
1 changed files with 15 additions and 4 deletions

View File

@ -203,13 +203,24 @@ export default {
if (e.target.closest("a")) { if (e.target.closest("a")) {
// link to first post bottom // link to first post bottom
if (e.target.closest("a").classList.contains("scroll-to-bottom")) { if (e.target.closest("a").classList.contains("scroll-to-bottom")) {
const rect = document let rect, topPosition;
.querySelector(".d-toc-cooked")
.getBoundingClientRect(); // if there is a second post, just scroll to the top of that post so the topic timeline shows
const secondPost = document.querySelector("#post_2");
if (secondPost) {
rect = secondPost.getBoundingClientRect();
topPosition = rect.top + window.scrollY - headerOffset();
} else {
// otherwise just go to the bottom of the first post
rect = document
.querySelector(".d-toc-cooked")
.getBoundingClientRect();
topPosition = rect.bottom + window.scrollY - headerOffset() - 10;
}
if (rect) { if (rect) {
window.scrollTo({ window.scrollTo({
top: rect.bottom + window.scrollY - headerOffset() - 10, top: topPosition,
behavior: "smooth", behavior: "smooth",
}); });