jquery - How to stop image target page jumping to image -

jquery - How to stop image target page jumping to image -

i have searched improve part of 2 days reply , nil working. have little image gallery on page. when selecting 1 of little images, jumps big image on page, causes page scroll downwards , creates disjointed experience. trying stop page jump. research far seems not possible stop css. total noob java script, have attempted of solutions proposed on site. however, none of them working.

i have tried sourcing http://code.jquery.com/jquery-latest.js creating own .js file source without success. must doing wrong. here illustration of code working with. help!

<!--plant images--> <div class="imageright"> <a href="#one" class="menucontrol"><img src="plantpics/abeliaxgrandiflorasmall1.jpg"></a> <a href="#two" class="menucontrol"><img src="plantpics/abeliaxgrandiflorasmall2.jpg"></a> <a href="#three" class="menucontrol"><img src="plantpics/abeliaxgrandiflorasmall3.jpg"></a> </div> </div> <script> var anchors = document.getelementsbytagname("a"); for(var = 0; < anchors.length; i++) { if ( anchors[i].classname == "menucontrol" ) { anchors[i].setattribute("onclick", "return false"); } } ​ </script> <!--preview image--> <section class="gallery"> <article id="one" class="target"> <figure> <a href="abeliaxgrandiflora2.html"><img src="plantpics/abeliaxgrandifloralarge1.jpg" alt="abelia x grandiflora"></a> </figure> </article> <article id="two" class="target"> <figure> <a href="abeliaxgrandiflora3.html"><img src="plantpics/abeliaxgrandifloralarge2.jpg" alt="abelia x grandiflora"></a> </figure> </article> <article id="three" class="target"> <figure> <a href="abeliaxgrandiflora4.html"><img src="plantpics/abeliaxgrandifloralarge3.jpg" alt="abelia x grandiflora"></a> </figure> </article> </section>

jquery css