Can the Back to Top Button be displayed permanently?

[Andre601]

With 7.1.0 and the implementation of the "Back to Top" button comes a downside I personally dislike: It only shows when you scroll up.
This kind of defeats the purpose of the button which is to give an easy way to get back to the top when scrolling down.

My question now is, if there is a way to make it always display when scrolling either up or down?
If not would the implementation of such a feature be a nice addition.

[squidfunk]

You can use some extra CSS to override the hidden state. The button is hidden to minimize accidental overlay of content and only displayed when the user intends to scroll up. IMHO that’s better UX than to always show it, but of course it’s a matter of taste.

[squidfunk]

I'm afraid that's not possible with plain CSS. You would need to change the logic that hides/shows the button here:

mkdocs-material/src/assets/javascripts/components/top/index.ts

Lines 88 to 117 in 285ad88

	export function watchBackToTop(
	_el: HTMLElement, { viewport$, main$ }: WatchOptions
	): Observable<BackToTop> {
	/* Compute direction */
	const direction$ = viewport$
	.pipe(
	map(({ offset: { y } }) => y),
	bufferCount(2, 1),
	map(([a, b]) => a > b),
	distinctUntilChanged()
	)
	/* Compute whether button should be hidden */
	const hidden$ = main$
	.pipe(
	distinctUntilKeyChanged("active")
	)
	/* Compute threshold for hiding */
	return combineLatest([hidden$, direction$])
	.pipe(
	map(([{ active }, direction]) => ({
	hidden: !(active && direction)
	})),
	distinctUntilChanged((a, b) => (
	a.hidden === b.hidden
	))
	)
	}

[facelessuser]

Can't you just do this?

a.md-top.md-icon {
    opacity: 1 !important;
}

Am I missing something?

[facelessuser]

Never mind. It shows, but doesn't trigger jumping back to top when clicked.

[Andre601]

Never mind. It shows, but doesn't trigger jumping back to top when clicked.

That and the fact that I don't want it to be always visible but only after the user scrolled a certain distance away from the header.

[Andre601]

I'm afraid that's not possible with plain CSS. You would need to change the logic that hides/shows the button here:

mkdocs-material/src/assets/javascripts/components/top/index.ts

Lines 88 to 117 in 285ad88

	export function watchBackToTop(
	_el: HTMLElement, { viewport$, main$ }: WatchOptions
	): Observable<BackToTop> {
	/* Compute direction */
	const direction$ = viewport$
	.pipe(
	map(({ offset: { y } }) => y),
	bufferCount(2, 1),
	map(([a, b]) => a > b),
	distinctUntilChanged()
	)
	/* Compute whether button should be hidden */
	const hidden$ = main$
	.pipe(
	distinctUntilKeyChanged("active")
	)
	/* Compute threshold for hiding */
	return combineLatest([hidden$, direction$])
	.pipe(
	map(([{ active }, direction]) => ({
	hidden: !(active && direction)
	})),
	distinctUntilChanged((a, b) => (
	a.hidden === b.hidden
	))
	)
	}

I already guessed that this will take some Javascript (or in this case Typescript) changes to work... And I suck at this stuff...
I probs just make the hidden state grey out the button and not have the animation thing play...