Interaktywne menu JS

Question

Witam

Rozmyślając nad tym jak wykonać najprostsze menu które będzie reagowało na kliknięcia użytkownika stworzyłem coś takiego(strona nie ma wyglądać - ma dobrze działać, dlatego nie przywiązywałem uwagi do kolorów, obrazków itp). I trochę się pogubiłem. Każde menu jakie widziałem było napisane tak 

<li><a href="">Opcja jeden</a></li>
<li><a href="">Opcja dwa</a></li>
<li><a href="">Opcja trzy</a></li>

 Ja zrezygnowałem z linków, dlaczego? Ponieważ opcje w menu nie maja prowadzić do innych podstron, tylko do danych sekcji na stronie(po kliknięciu ma się 'przeskrolować' do danej sekcji), wiem że można załatwić to w taki sposób 

<li><a href="#test">Opcja jeden</a></li>
<li><a href="">Opcja dwa</a></li>
<li><a href="">Opcja trzy</a></li>

I do tego miejsca gdzie chcemy być przeniesieni po kliknięciu dodać id="test", jednak wtedy do adresu jest dodawane na końcu to id. Ponadto jest to integracja strony z użytkownikiem a pierwotnym zadaniem JS były właśnie interakcje.

Może trochę za bardzo na siłę chciałem to zrobić za pomocą JS - nie wiem, wiem tylko że nie potrafię sobie wyjaśnić jak osiągnąć taki efekt, żeby był on zgody z standardami.

Finalne pytanie - Jaki jest najlepszy, najbardziej zgodny sposób na osiągnięcie takiego efektu jaki mi się udało osiągnąć?

Tak wiem mój JS nie jest jakiś super..

Github

Pozdrawiam

Comments

Gdzie takie coś widziałeś? 

<a href=""><li>Tekst</li></a>

Linki "a" powinny się zawsze znajdować wewnątrz li (którego rodzicem powinno być ul lub ol). 

---

Człowiek myśli jedno pisze drugie.. Już poprawiłem treść pytania

Answer 1

Widzę, że uporałeś się z tym :) Jednak zamiast:

window.scrollTo(0, offsetJumbotron-heightMenu);

poleciłbym zapoznać i spróbować:

document.getElementById('id_elementu').scrollIntoView();

Dodatkowo można ustalić zachowanie tego przewijania :)

np:

document.getElementById('id_elementu').scrollIntoView({
  behavior: 'smooth'
});

 

Comments

Witaj

Oglądałem kurs JS na kanale Jakub Jurkian, kurs bodajże z 2017 roku i była tam mowa że document.getElementById jest już trochę stare i powinno się używać querySelector - czy tak jest? I drugie pytanie, czy bardzo pomieszałem ES5 z ES6, bo kompletnie nie wiem.

Dziękuje i pozdrawiam

---

Cóż, nie mam styczności z JS na co dzień, więc nie jestem pewien, czy odradza się korzystania z getElementById. Jeśli tak jest, to cóż za problem zrobić to tak:

document.querySelector('#'+id).scrollIntoView({behavior: 'smooth'});

Pozdrawiam :)

P.S. Tak jak wspomniałem wyżej, nie mam styczności na co dzień, więc również nieetyczne wydaję mi się z mojej strony ocenianie kodu.