HTML Kod HTML "gryzie się" z javascript

Cześć, tworzę stronę "One page" niestety html gryzie się z javascript i nie wiem co na to poradzić. Konkretnie chodzi mi o to że zrobiłem lightboxa który pięknie działa jednak gdy wrzucę pliki z javascript który powinien płynnie przewijać stronę po kliknięciu na zdjęcie strona delikatnie przesuwa się do góry. Co poradzić? 

Lightbox:

<section class="section3" id="projekty">
<div class="container">


<a href="#lay1">
 <img src="images/lay1.png" class="thumbnail">
</a>

<a href="#lay1">
 <img src="images/lay1.png" class="thumbnail">
</a>
<a href="#lay1">
 <img src="images/lay1.png" class="thumbnail">
</a>


<a href="#_" class="lightbox" id="lay1">
 <img src="images/lay1.png">
</a>

<a href="#_" class="lightbox" id="lay1">
 <img src="images/lay1.png">
</a>

<a href="#_" class="lightbox" id="lay1">
 <img src="images/lay1.png">
</a>

</div>

Wrzuć na jakiś serwer swój cały kod potrzebny do odtworzenia błędu.

DEMO STRONY

html gryzie się z javascript

Może coś więcej? Co oznacz że się gryzię? Konsola nie pokazuje błędów

Wejdź na stronę którą wstawiłem post wyżej i na dole strony znajdziesz 3 poziome obrazki kliknij w którykolwiek i zobacz co się stanie :p

Nie rozumiem gdzie jest ten błąd w działaniu. Wszystko zachowuje się poprawnie.

Klikasz w obrazek z href="#lay1", a ten przenosi cię do elementu o id lay1. Poza tym - tego lightboxa nigdzie nie dołączasz. Masz za to namieszane w kodzie, a mianowicie wielokrotne stosowanie tych samych id.

No właśnie nie jest wszystko ok. Wszystko ma wyglądać w ten sposób gdy kliknę w zdjęcie. EFEKT KOŃCOWY

Naprawa błędów o których @Divir pisał może rozwiązać problem.

Masz lay1 dla wszystkich elementów. Posegreguj to. Poczytaj o zasadach tworzenia strony.