Nawigacja do podanej sekcji

Question

Co zrobić, aby po naciśnięciu wybranego przycisku z menu nav  strona była scrollowana do wybranego akapitu, ale był on na środku ekranu, a nie u góry ekranu.

https://codepen.io/K4P3K/pen/KKMYRmM

Answer 1

<script>
            var duration = 650;
            jQuery(function ($) {
                $.scrollTo(0);

                $(".link1").click(function(){
                     $.scrollTo($('#kontakt'), {
                        duration: duration,
                        offset: {
                            top: -55
                        }
                    });
                })
                $(".link2").click(function () {
                    $.scrollTo($('#projekty'), {
                        duration: duration,
                        offset: {
                            top: -55
                        }
                    });
                })
                $(".link3").click(function () {
                    $.scrollTo($('#o-nas'), {
                        duration: duration,
                        offset: {
                            top: -55
                        }
                    });
                })
            }
            );

            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) $('.scrollup').fadeIn();
                else $('.scrollup').fadeOut();
            }
            );

        </script>

Tu masz mój kod. Zapewnia gładkie przewijanie. Chodzi w nim o to że dodaje parametr offset, który określa margines od góry. Żeby było na środku musisz pokombinować z jednostkami. 

Jeśli nie o to ci chodziło to możesz pokombinować z css i parametrem scroll-behavior z tego co pamiętam tam też się dało ustawić margines.

EDIT: zapomniałem napisać, że musisz użyć jquery i jednej biblioteki

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

 

 

 

Comments

Przepraszam, że tak chaotycznie jak coś, ale pisze w pospiechu 

---

Czyli pozostał problem określenia środka akapitu?

---

@Bartek12, Aktualnie mam problem z podpięciem skryptu do strony ze względu, że dopiero zacząłem używać js.

---

tak i musisz do każdego elementu menu przypisać odpowiednią klasę lub id.

(w przykładzie klasy: link1,link2,link3)

---

@K4P3K, w takim razie możesz spróbować z css tak jak napisałem.

Parametr scroll-behavior i jak dobrze kojarzę scroll-margin-top

---

Okej dziękuję