title: My Website is scrolling by itself. Can´t find a solution
body: <p>I have a problem with my website, it is scrolling by itself after I scrolled down a certain amount. It seems that the Image gallery on my Website is controlling the automated scrolling. I can´t find any questions asked about this problem, that's why I´m asking myself.<br />
  Hope you can help me here.</p>
  <p>Here I have the code for my Website:</p>
  <pre><code>&lt;html lang=&quot;de&quot; style=&quot;background-color:#f6e9d7&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;head&gt; &lt;title&gt;own website&lt;/title&gt; &lt;/head&gt;
       &lt;body&gt;
      &lt;style&gt;
          h1 {
              margin-bottom: 20px;
          }
      &lt;/style&gt;
     
      &lt;div style=&quot;text-align: center; height: 230px&quot;&gt;
      &lt;img id=&quot;top&quot; src=&quot;C:\Users\arnot\Pictures\website mochup defaults\LOGO Versuch 4.png&quot; width=&quot;206&quot; height=&quot;204&quot; alt=&quot;index.html&quot;&gt;
      &lt;/div&gt;
      &lt;h1 id=&quot;PERSONAL APPEAL&quot; style=&quot;text-align: center; font-weight: lighter; color:#333333; font-family: sans-serif; text-decoration-line: overline&quot; font-stretch=&quot;20%&quot;&gt;PERSONAL APPEAL&lt;/h1&gt;
      &lt;/body&gt;
      &lt;body id=&quot;Body1&quot;&gt;
          &lt;style&gt;
          button {
              border-style:none;
              text-decoration:none;
              background-color:#f6e9d7;
              color:#333333;
              padding:20px;
              font-size:15px;
              width:150px;
              transition-duration: 0.3s;
          }
          button:hover {
              background-color:#faf3e9;
          }
          .dropdown {
              display: inline-block;
              position: absolute;
              margin-bottom:50px;
              margin-left:-4px;         
          }
          .dropdown-content {
              display:none;
              width:100%;
              background-color:#f6e9d7;
              overflow:auto;
          }
          .dropdown:hover .dropdown-content {
              display:block;
          }
          .dropdown-content a {
              font-size:13px;
              display:block;
              color:#333333;
              padding:10px;
              text-decoration:none;
              font-family: Arial, Helvetica, sans-serif;
  
          }
          .dropdown-content a:hover {
          color:#333333;
          background-color:#f7ede0;
          }
          #Shop-Pfeil {
              float:right;
              display:block;
              height:15px;
          }
          .dropdown:hover #Shop-Pfeil {
              transform:rotate(90deg);
              float:right;
              display:block;
              height:15px;
          }
          #contact {
              margin-left:146px;
          }
          #about {
              margin-left:-4px;
          }
          .animate{
          animation: navmove 2s;
          }
          @keyframes navmove{
              0%{padding-left: 0px;}
              50%{padding-left: 100px;}
              100%{padding-left:0px;}
          }
          #myTopnav{
              overflow:visible;
              position:absolute;
              width: 100%;
              background-color:#f6e9d7;
              box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
          }
          &lt;/style&gt;
          &lt;body id=&quot;Body1&quot;&gt;
          &lt;div class=&quot;topnav&quot; id=&quot;myTopnav&quot;&gt;
            &lt;button href=&quot;#home&quot; id=&quot;home&quot;class=&quot;active&quot;&gt;Home&lt;/button&gt;
            &lt;div class=&quot;dropdown&quot;href=&quot;#shop&quot; id=&quot;shop&quot;&gt;&lt;button&gt;Shop&lt;img class=&quot;Pfeil&quot; id=&quot;Shop-Pfeil&quot; src=&quot;C:\Users\arnot\Pictures\WebsiteImages\Pfeil3.png&quot; &gt;&lt;/button&gt;
              &lt;div class=&quot;dropdown-content&quot;&gt;
              &lt;a href=&quot;#Men&quot;&gt;Men&lt;/a&gt;
              &lt;a href=&quot;#Woman&quot;&gt;Woman&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;button href=&quot;#contact&quot; id=&quot;contact&quot;&gt;Contact&lt;/button&gt;
            &lt;button href=&quot;#about&quot; id=&quot;about&quot;&gt;About&lt;/button&gt;
          &lt;/div&gt;
          &lt;script&gt;
              var element = document.getElementById(&quot;myTopnav&quot;);            
              setInterval(checkscrolldown, 1)
              function checkscrolldown() {
                      var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
                      if(scrollTop &gt; 250) {
                          element.classList.add(&quot;animate&quot;);
                          function pauseanimation() {
                                  element.style.animationPlayState = &quot;paused&quot;;
                          }
                          setTimeout( pauseanimation, 1000);    
                      };
                      if(scrollTop &gt; 290) {
                          element.style.position = &quot;fixed&quot;;
                          element.style.marginTop = &quot;-290px&quot;;
                      }
              };
              setInterval(checkscrollup, 1)
              function checkscrollup() {
                  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
                  if(element.style.animationPlayState == &quot;paused&quot; &amp;&amp; scrollTop &lt; 250) {
                      element.style.animationPlayState = &quot;running&quot;; 
                      setTimeout(function() {element.classList.remove(&quot;animate&quot;)}, 2000);
                  }
                  if(scrollTop &lt; 290) {
                      element.style.position = &quot;&quot;;
                      element.style.marginTop = &quot;0px&quot;;
                  }
              }
          &lt;/script&gt;
          &lt;/body&gt;
      &lt;/body&gt;
      &lt;body id=&quot;Body2&quot;&gt;
          &lt;style&gt;
      *{
          padding:0px;
          margin:0px;
          overflow-x:hidden;
      }
      #Gallery{
          margin-top:79px;
          width:100%;
          height:500px;
          overflow: hidden;
          z-index: -2;
      }
      #Gallery ::-webkit-scrollbar {
          display:none;
      }
      #Img1{
          background-color:green;
          animation:move 12s infinite;
      }
      #Img2{
          background-color:blue;
      }
      #Img3{
          background-color:red;
      }
      .img{
          height:800px;
          width:auto;
          text-align:center;
          font-size:50px;
          font-family: Arial, Helvetica, sans-serif;
      }
      @keyframes move {
          0%{margin-top:0px;}
          18%{margin-top:0px;}
          36%{margin-top:-800px;}
          50%{margin-top:-800px;}
          72%{margin-top:-1600px;}
          90%{margin-top:-1600px;}
          100%{margin-top:0px;}
      }
          &lt;/style&gt;
          &lt;body id=&quot;Body&quot;&gt;
              &lt;div id=&quot;Gallery&quot;&gt;
                  &lt;div id=&quot;Img1&quot; class=&quot;img&quot;&gt;Image 1&lt;/div&gt;
                  &lt;div id=&quot;Img2&quot; class=&quot;img&quot;&gt;Image 2&lt;/div&gt;
                  &lt;div id=&quot;Img3&quot; class=&quot;img&quot;&gt;Image 3&lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
             &lt;script&gt;
                 
             &lt;/script&gt;
      &lt;/body&gt;
      &lt;body id=&quot;Body3&quot;&gt;
          &lt;style&gt;
              #stretchWebsite{
                  height:2000px;
                  position: absolute;
              }
          &lt;/style&gt;
          &lt;div id=&quot;stretchWebsite&quot;&gt;&lt;button&gt;HELLO THERE&lt;/button&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;```
  
  </code></pre>