скрол якорь вниз

[misha.korolcov]

++

[Malleys]

<a href="#bottom">Вниз</a>
<div style="height: 200vh;"></div>
<p id="bottom">Низ</p>

<style>
	html {
		scroll-behavior: smooth;
	}
</style>

[misha.korolcov]

спс но мне нужен что по умолчанию он имел display:none потом при покрутке странице вниз он появляеться а при покрутке верх убиралса как например здесь https://fxwindsor.com/public/en

[Malleys]

<div style="height: 200vh;">Крути вниз!</div>
	
<button class="scroll-to-top-button" onclick="window.scrollTo(0, 0);">▲</button>
<script>
addEventListener("scroll", () => {
	document.documentElement.classList.toggle("scroll-to-top-button-is-visible", scrollY > 0.5 * innerHeight)
}, { passive: true });
</script>
<style>
html {
	scroll-behavior: smooth;
}
.scroll-to-top-button {
	font-size: 300%;
	border: none;
	outline: none;
	width: 1.5em;
	height: 1.5em;
	background: #345;
	position: fixed;
	right: .2em;
	bottom: .2em;
	border-radius: .2em;
	line-height: 0;
	color: white;
	opacity: 0;
	pointer-events: none;
	transition: 300ms opacity;
}
.scroll-to-top-button-is-visible .scroll-to-top-button {
	opacity: 1;
	pointer-events: all;
}
</style>

UPD В данном случае outline: none; не ломает доступность, поскольку переместиться в начало страницы при помощи клавиатуры можно нажав клавишу Home, а на сенсорном экране обратной связью об удачном нажатии кнопки будет само перемещение в начало страницы.