Scroll to bottom?

Question

Cześć, jak można przerobić ten kod: https://codepen.io/FoxCode/pen/KKwvGjQ 
Na taki, żeby przycisk "down-btn" działał na tej samej zasadzie (taki smootch scroll), tylko, że na dół strony?

Answer 1

const downBtn = document.querySelector('.down-btn');

downBtn.addEventListener('click', () => {
    document.body.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'});
})

analogicznie dla top też użyłbym tej metody, tylko w block ustaw wtedy "start". Nie widzę za bardzo sensu bawienia się w ten dziwne obliczenia i scrollTop. To jest wg mnie wygodniejsze i czytelniejsze.

Comments

O boże, nie widziałem, że istnieje coś tak prostego! Na pierwszych stronach stackoverflow są właśnie jakieś liczenia, sprawdzanie co sekundę gdzie się znajduje użytkownik itd.
Mam jeszcze jedno pytanie, czy istnieje też jakiś prostszy sposób na np. ukrycie przycisku 'bottom' gdy zbliża się do końca? Np. 100px przed końcem strony. (Ja raczej bym kombinował z użyciem eventListener onscroll.

---

tu już sytuacja jest nieco inna... są dwie drogi, można standardowo obsługiwać event scroll dla window i w zależności od pozycji usera usuwac/pokazywac button albo pobawić się w intersection observer, ale z tym trzeba uważać żeby dobrze to działało też na wszystkich mobilkach (iOS itp.). Generalnie jeśli to jakaś prosta stronka to zostałbym przy tradycyjnym scrollu:

window.addEventListener('scroll', () => {
  const offset = window.innerHeight + window.pageYOffset;
  const showButton = offset >= document.body.scrollHeight;
  button.classList.toggle('show', showButton);
});

to mógłby być kod dla ukrywania buttona do przewijania w górę, czyli pokazanie go dopiero, gdy user zobaczy ostatni element na stronie, ewentualnie można tu sobie w tym warunku dodać jakieś dodatkowe PX. Dla buttona drugiego byłoby podobnie.

---

Ok, a istnieje jeszcze jakaś opcja, która pozwoli mi np. zamiast bloku "end" zrobić coś takiego jak "end+200px"? W sensie, chciałbym, żeby scroll był na 200px przed końcem.