Płynne przewijanie w js.

pytanie zadane 9 lutego 2019 w JavaScript przez Byczek_ Bywalec (2,570 p.)

Witam mam problem ponieważ chciałbym, żeby po kliknięciu O WODZIE przeniosło nas trochę wyżej ponieważ w tym momencie jak widzimy na obrazku zasłania nam menu. Przepraszam za składnie zdania, ale nie wiem jak to opisać.

1 odpowiedź

odpowiedź 9 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

no ale pokaż jak robisz to przewijanie, bo masz to z tego co rozumiem zrobione tak? czyli kwestia po prostu dodania tych paru px wysokości menu, albo na sztywno jeśli menu ma zawsze stałą wysokość albo ściągnij sobie jego computed hight w momencie scrolla przy użyciu getComputedStyle.

komentarz 9 lutego 2019 przez Byczek_ Bywalec (2,570 p.)

https://codepen.io/anon/pen/KJQBWN

komentarz 9 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

ehh, czyli w ogóle nie czytałeś mojej odpowiedzi i nawet nie próbowałeś zrobić tego co proponuję...? tylko wolisz dać kod i "zróbcie mi to"... :(

A ponad to, wiem że się na tym forum powtarzam i jestem cięty ale taki już jestem, powiedz mi dlaczego W OGÓLE nie zacząłeś nawet szukać rozwiązania w google? Nawet nie poświęciłeś na to 2 sekund...

Oto przykłady z pierwszej piątki wyników google, do wyguglania w 10 sekund:

https://answers.themler.io/questions/76954/fixed-header-menu-overlaps-anchors-sections

https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/

https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

komentarz 9 lutego 2019 przez Byczek_ Bywalec (2,570 p.)
edycja 9 lutego 2019 przez Byczek_

Udało się ale jeszcze bez płynnego przechodzenia ale to już postaram się sam poszukać. A czy mógłbyś sprawdzić jeszcze kod?

https://byczowskik.github.io/water-side/

komentarz 9 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Jeśli nie zależy Ci na jakieś wielkiej kontroli tego przewijania to dodaj po prostu w CSS:

html {
    scroll-behavior: smooth;
}

to zapewni Ci w miarę płynne przejście, nie ma co prawda opcji regulowania czasu itp. ale w praktyce najczęściej nie jest to potrzebne, a wymagałoby użycia JS, a tu masz natywne rozwiązanie przeglądarek, które jest w miarę fajnie wspierane (a nie oszukujmy się, jak ktoś na starszej to otworzy to nie będzie tragedii jak nie dostanie płynnego przejścia tylko przeskok).