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

[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, а на сенсорном экране обратной связью об удачном нажатии кнопки будет само перемещение в начало страницы.