In your anchor <a>
tags change the href attribute to javascript:void(0);
, like this snippet of code.
<a href="javascript:void(0);" id="branding3">
<img src="img/projects/thumbs/branding3.jpg" alt="...">
<span class="portfolio-hover">
<span>
<h4>Synex</h4>
<em>Branding</em>
</span>
</span>
</a>
Currently you have some pound symbol (#) within your anchor tags' href in which does not point to any id attribute in your tags. That is why the page scrolls directly to the top when you click those links.