My "next" and "previous" for images when clicked pushes it to the top of the page?

Question

I'm just a complete beginner so most of what I have are combinations from tutorial sites but I'm really stuck on this that it keeps jumping to the top of the page when I try to cycle through next image etc. Being a totally newby any detailed help is really appreciated? I don't know where I'm going wrong and have no clue where to even start to fix it?

#gallerywrapper {
     width:640px;
     height:450px;
     margin:0 auto;
     position:relative;
     font-family:verdana, arial, sans-serif;
 } 

 #gallerywrapper #gallery {
     position:absolute;
     left:0;
     top:0;
     height:450px;
     width:640px;
     overflow:hidden;
     text-align:center;
 } 

 #gallerywrapper #gallery div {
     width:640px; height:900px; 
     padding-top:10px; 
     position:relative;
 } 

 #gallerywrapper #gallery div img {
     clear:both; 
     display:block; 
     margin:0 auto; 
     border:0;
 } 

 #gallerywrapper #gallery div h3 {
     padding:10px 0 0 0; 
     margin:0; 
     font-size:18px;
 } 

 #gallerywrapper #gallery div p {
     padding:5px 0; 
     margin:0; 
     font-size:12px; 
     line-height:18px;
 } 

 #gallery .previous{ 
     display:inline;
     float:left;
     margin-left:80px;
     text-decoration:none;
  
  background-color: #ddd;
    color: black;
 border-radius: 50%;
 
 padding: 8px 16px;
 } 

 #gallery .next{ 
     display:inline;
     float:right;
     margin-right:80px;
     text-decoration:none;
  
  background-color: #FA4B2A;
    color: white;
 border-radius: 50%;
 
 padding: 8px 16px;
 }

<div id="gallerywrapper">
     <div id="gallery">
      <div id="pic1">
       <img src="images/b1.jpg" height="350" width="500" alt="Image 1">
       <a class="previous round"  href="#pic5" >&#8249;</a>
       <a class="next round" href="#pic2" >&#8250;</a>
     <h3>Botanical Gardens</h3>
     
      
    
      </div>
      <div id="pic2">
       <img src="images/b2.jpg" height="350" width="500" alt="Image 2">
       <a class="previous round" href="#pic1">&#8249;</a>
       <a class="next round" href="#pic3">&#8250;</a>
       <h3>Botanical Gardens</h3>
      
      </div>
      <div id="pic3">
       <img src="images/b3.jpg" height="350" width="500" alt="Image 3">
       <a class="previous round" href="#pic2">&#8249;</a>
       <a class="next round" href="#pic4">&#8250;</a>
       <h3>Botanical Gardens</h3>
     
      </div>
      <div id="pic4">
       <img src="images/b4.jpg" height="350" width="500" alt="Image 4">
       <a class="previous round" href="#pic3">&#8249;</a>
       <a class="next round" href="#pic5">&#8250;</a>
       <h3>Botanical Gardens</h3>
     
      </div>
      <div id="pic5">
       <img src="images/b5.jpg" height="350" width="500" alt="Image 5">
       <a class="previous round" href="#pic4">&#8249;</a>
       <a class="next round" href="#pic1">&#8250;</a>
       <h3>Botanical Gardens</h3>
      
      </div>
     </div>
 </div>

score 2 · Answer 1 · answered Nov 29 '17 at 08:30

This is due to use of link tag a, as you can see you are specifying ID of element in the href and by default your are scrolling to this element which is in the top of the page.

To avoid this you may use some javascript to prevent the default behavior of these link tags.

You may check these links :

preventDefault() on an <a> tag

How to stop default link click behavior with jQuery

https://css-tricks.com/return-false-and-prevent-default/

My "next" and "previous" for images when clicked pushes it to the top of the page?

1 Answers1