title: Stop page scrolling to the top jQuery
body: <p>I have created a demo on CodePen. where you click on a box then the content for the box shows up and the window scrolls down to it. Then you can close it by clicking a box in the bottom corner. The problem is that when I click the main box a second time the window scrolls to the top of the page. Why is this happening? also is there a shorter way to write this code?</p>
  
  <p><a href="https://codepen.io/Reece_Dev/pen/NjQvdv" rel="nofollow noreferrer">https://codepen.io/Reece_Dev/pen/NjQvdv</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $("#link_1").click(function(){
      $("#cont_1").toggleClass('show');
      
      $('html, body').animate({
          scrollTop: $("#cont_1").offset().top
      }, 500);
      
      $("#close_btn1").click(function(){
        $("#cont_1").removeClass('show');
        
        $('html, body').animate({
          scrollTop: $("#link_1").offset().top
      }, 500);
      });
    });
    
    $("#link_2").click(function(){
      $("#cont_2").toggleClass('show');
      
      $('html, body').animate({
          scrollTop: $("#cont_2").offset().top
      }, 500);
      
      $("#close_btn2").click(function(){
        $("#cont_2").removeClass('show');
        
        $('html, body').animate({
          scrollTop: $("#link_2").offset().top
      }, 500);
      });
    });
    
    $("#link_3").click(function(){
      $("#cont_3").toggleClass('show');
      
      $('html, body').animate({
          scrollTop: $("#cont_3").offset().top
      }, 500);
      
      $("#close_btn3").click(function(){
        $("#cont_3").removeClass('show');
        
        $('html, body').animate({
          scrollTop: $("#link_3").offset().top
      }, 500);
      });
    });
    
    $("#link_4").click(function(){
      $("#cont_4").toggleClass('show');
      
      $('html, body').animate({
          scrollTop: $("#cont_4").offset().top
      }, 500);
      
      $("#close_btn4").click(function(){
        $("#cont_4").removeClass('show');
        
        $('html, body').animate({
          scrollTop: $("#link_4").offset().top
      }, 500);
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin: 0;
    padding: 0;
  }
  
  body{
    height: 5000px;
  }
  
  #head{
    height: 600px;
  }
  
  #link_cont{
    text-align: center;
    font-size: 0;
  }
  
  .links{
    cursor: pointer;
    display: inline-block;
    height: 500px;
    width: 25%;
  }
  
  #link_1{
    background-color: blue;
  }
  
  #link_2{
    background-color: red;
  }
  
  #link_3{
    background-color: yellow;
  }
  
  #link_4{
    background-color: pink;
  }
  
  #cont_1 p{
    background-color: lightblue;
  }
  
  #cont_2 p{
    background-color: tomato;
  }
  
  #cont_3 p{
    background-color: lightyellow;
  }
  
  #cont_4 p{
    background-color: lightpink;
  }
  
  .hide{
    display: none;
    position: relative;
  }
  
  .show{
    display: block;
  }
  
  .close{
    pointer: cursor;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="head"&gt;&lt;/div&gt;
  
  
  &lt;div id="link_cont"&gt;
    &lt;div class="links" id="link_1"&gt;&lt;/div&gt;
    &lt;div class="links" id="link_2"&gt;&lt;/div&gt;
    &lt;div class="links" id="link_3"&gt;&lt;/div&gt;
    &lt;div class="links" id="link_4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cont_1" class="hide"&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
  
  Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  
  Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
  
  Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
  
  Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.&lt;/p&gt;
    
    &lt;div class="close" id="close_btn1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cont_2" class="hide"&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
  
  Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  
  Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
  
  Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
  
  Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.&lt;/p&gt;
    
    &lt;div class="close" id="close_btn2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cont_3" class="hide"&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
  
  Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  
  Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
  
  Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
  
  Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.&lt;/p&gt;
    
    &lt;div class="close" id="close_btn3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cont_4" class="hide"&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
  
  Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  
  Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
  
  Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
  
  Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.&lt;/p&gt;
    
    &lt;div class="close" id="close_btn4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>