Odnośniki na stronie niżej niż założono

Question

Mam u góry strony dość wysokie menu - na 100px. Klikając w odnośniki przenoszę się do odpowiednich elementów strony za pomocą #. Przez ujecie menu w fixed wszystko poszło mi do góry i klikając np. w ,,o nas" w menu -> zjeżdża mi do tego elementu strony, jednak główny tytuł jest i tak za menu ( u góry). Chciałabym aby po wciśnięciu odnośnika - przenosiło mnie do odpowiedniego # na stronie ale dodatkowo  jeszcze dodawało z 200px od góry aby wyświtlało mi te elementy od środka strony. Czy ktoś rozumie mój problem?

Answer 1

Witam.

$('a[href^="#"]').click(function() {//przewijanie strony
        var hash = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(hash).offset().top-200
        }, 1500);
        return false;
    });//koniec przewijania do #

.top-200 to jest to o co C i chodzi.

Answer 2

Możesz to załatwić za pomocą padding-top - ustalasz go na wysokość menu+kilka px przestrzeni pomiędzy samym paskiem menu a tekstem.

Comments

Ustaliłam górny padding na wysokość tego menu, ale nie mogę zaingerować bardziej bo to projekt szablonowy, cięty z psd, ma być taki sam. Może da się to zrobić za pomocą JavaScriptu?

---

Nie wiem w jaki sposób się odwołujesz do elementu, jeżeli poprzez inny element(nie zawierający treści), możesz go wystylizować tak, aby był kilkanaście pixeli wyżej(np.: poprzez position: absolute). Osobiście jeżeli miałbym wybierać pomiędzy dodatkowym kodem w JSie a dodaniem kilku pixeli do szablonu wybrałbym to drugie - ale z JSem na pewno da się to zrobić :)