title: Scroll to top animate not scrolling down after
body: <p>I've got a scroll to top button on my web page that has an animate function to scroll smoothly to the top when pressed. That feature works 100% but after it scrolled to the top it doesn't allow me to normally scroll down again. It's like the function keeps running.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>    $(window).scroll(function(){
              var scroll = $('#scroll');
              if ($(this).scrollTop() &gt; 400) {
                    scroll.fadeIn('slow');
              }
              else  {
                  scroll.fadeOut('slow');
              }
  
              $('#scroll-image').on('click', function(){
              $('html, body').animate({scrollTop: 1}, 800);
              return false;
              });
          });
  </code></pre>
  
  <p>Any suggestions? And thanks in advance!</p>
  
  <p>Edit: Here is my HMLT</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="google-site-verification" content="D5eWVqc8lqeGSw4BjMank9FS8Dy4lusI7dxEm9qHtzI" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;a id="toggle" class="toggleClassOff"&gt;≡&lt;/a&gt;
              &lt;nav id="navbar" class="navbarClassOff"&gt;
                  &lt;ul id="navbarUl"&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="skills.html"&gt;Skills&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="qualifications.html"&gt;Qualifications&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;div id="scroll"&gt;
              &lt;a href="#" id="scroll-image"&gt;&lt;img src="images/top-button.png"&gt;&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div id="about-page-container"&gt;
              &lt;img id="about-page-image" src="images/question.png"&gt;
              &lt;div id="about-page" class="about-page-class-off"&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="content" class="contentClassOff"&gt;
              &lt;h1&gt;&lt;/h1&gt;
              &lt;img src="images/2009-English-Certificate.jpg" alt="Can't find image"&gt;
              &lt;img src="images/2010-English-Certificate.jpg" alt="Can't find image"&gt;
              &lt;img src="images/Senior-Certificate.jpg" alt="Can't find image"&gt;
              &lt;h1&gt;&lt;/h1&gt;
              &lt;img src="images/comptiaA.jpg" alt="Can't find image"&gt;
              &lt;img src="images/comptiaN.jpg" alt="Can't find image"&gt;
              &lt;img src="images/first-aid.jpg" alt="Can't find image"&gt;
              &lt;img src="images/rope-access.jpg" alt="Can't find image"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic|Oswald);
  
  * {
      font-family: 'Open Sans';
      margin: 0;
  }
  
  body{
      position: relative;
      background-image: url('images/wallpaper1.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
  }
  
  /*
  //////////////////////////
  /ToggleToggleToggleToggle
  //////////////////////////
  */
  .toggleClassOff{
      position: fixed;
      font-size: 3.0em;
      cursor: pointer;
      top: 0.2em;
      left: 1em;
      left: 0.6em;
      z-index: 1;
      color: #fff;
  }
  .toggleClassOn{
      position: fixed;
      font-size: 3.0em;
      cursor: pointer;
      top: 0.2em;
      left: 1em;
      left: 4.4em;
      z-index: 1;
      color: #fff;
  }
  
  /*
  /////////////////////////
  /NavbarNavbarNavbarNavbar
  /////////////////////////
  */
  .navbarClassOff {
      position: fixed;
      width: 12em;
      background-color: blue;
      height: 100vh;
      left: -12em;
      background-color: #666;
  }
  .navbarClassOn {
      position: fixed;
      width: 12em;
      background-color: blue;
      height: 100vh;
      left: 0em;
      background-color: #666;
  }
  
  #navbarUl {
      margin-top: 2em;
      list-style-type: none;
  }
  #navbarUl &gt; li {
      margin-bottom: 1em;
      margin: auto;
      margin-left: -2.5em;
      width: 10.4em;
      text-align: center;
      line-height: 3em;
      font-size: 1.2em;
  }
  #navbarUl &gt;li:hover {
      background-color: #fff;
  }
  #navbarUl &gt; li &gt; a {
      text-decoration: none;
      color: #ff6600;
      display: block;
      font-weight: 300;
  }
  /*
  /////////////////////////////
  /ContentContentContentContent
  /////////////////////////////
  */
  #content{
      margin-bottom: 50px;
  }
  .contentClassOff{
      position: relative;
      width: 70vw;
      margin: auto;
      left: 0em;
      top: 3em;
      font-size: 1.2em;
      background-color: #fff;
      opacity: 0.9;
      padding: 1em;
  }
  .contentClassOn{
      position: relative;
      width: 70vw;
      margin: auto;
      left: 5em;
      top: 3em;
      background-color: #fff;
      opacity: 0.9;
      padding: 1em;
  }
  #content &gt; p {
      width: 100%;
  }
  
  #content h1 {
      position: relative;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666;
      text-align: center;
      margin-bottom: 1em;
  }
  
  img {
      max-width: 100%;
      margin-bottom: 3em;
  }
  #id-photos-container{
      width: 100%;
      margin: auto;
      float: left;
      clear: both;
  }
  .id-photos{
      float: left;
      height: 280px;
      width: 280px;
  }
  .id-photos:first-child {
      margin-left: 60px;
  }
  
  /*
  p &gt; iframe {
      width: 100%;
  }
  */
  /*
  /////////////////////////////////////////
  /TransitionTransitionTransitionTransition
  /////////////////////////////////////////
  */
  .toggleClassOff, .navbarClassOff, .contentClassOff {
      transition: left 0.4s ease-in;
  }
  
  /*
  /////////////////////////////////////////
  /About-Page Section
  /////////////////////////////////////////
  */
  #about-page-container &gt; img {
      width: 80px;
      height: 80px;
      position: fixed;
      right: 3%;
      top: 6%;
      z-index: 10;
      animation-name: img-size;
      animation-iteration-count: 3;
      animation-delay: 2s;
      animation-duration: 1s;
  }
  @keyframes img-size {
      0% {height: 80px; width: 80px}
      50% {height: 120px; width: 120px;}
      100% {height: 80px; width: 80px;}
  }
  
  .about-page-class-off {
      position: fixed;
      z-index: 10;
      width: 300px;
      height: 220px;
      opacity: 0;
      background-color: #666;
      border-radius: 10px;
      top: 100px;
      right: 100px;
      padding: 18px;
  }
  .about-page-class-on {
      position: fixed;
      z-index: 10;
      width: 300px;
      height: 220px;
      opacity: 1;
      background-color: #666;
      border-radius: 10px;
      top: 100px;
      right: 100px;
      padding: 18px;
  }
  .about-page-class-off {
      transition: opacity 0.2s ease-in;
  }
  
  #about-page &gt; p {
      color: #ff6600; 
     /* color: #fff; */
     /* color: #ad33ff; */
      font-size: 1.4em;
  }
  
  /*
  /////////////////////////////////////////
  /Scroll to top Scroll to top Scroll to top
  /////////////////////////////////////////
  */
  
  #scroll {
      position: fixed;
      bottom: 10%;
      right: 3%;
      z-index: 20;
      display: none;
      height: 80px;
      width: 80px;
      text-decoration: none;
  }
  
  :focus {outline:none;}
  </code></pre>