title: How to go about merging an onclick Event and Scroll To Top
body: <p>I am very new to coding and recently had a website built for me. I am having trouble merging two different javascript codes together. This is the first javascript code, which allows me to open an event.</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>function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
   
  document.getElementById("defaultOpen").click();</code></pre>
  </div>
  </div>
  </p>
  <p>The next code allows me to scroll to the top of the page on click. It's able to be made into an OnClick function.</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>var scrollToTop = window.setInterval(function() {
      var pos = window.pageYOffset;
      if ( pos &gt; 0 ) {
          window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
      } else {
          window.clearInterval( scrollToTop );
      }
  }, 16); // how fast to scroll (this equals roughly 60 fps)</code></pre>
  </div>
  </div>
  </p>
  <p>I am asking how to make merge these codes together so when I click on an image, I am brought to that event AND I am scrolled to the top of the page. They work separately but I want them together. I've had issues with other codes such as the page refreshing to the top, but I'm not shown the event. Without scroll to the top the event is shown as where you are on the screen. I am very new to coding and know very little so I apologize if this is a really simple question. Thank you everyone!</p>
  <p>EDIT: Figured out a soltuion. Simply paste</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-html lang-html prettyprint-override"><code>, document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()</code></pre>
  </div>
  </div>
  </p>
  <p>into your onclick attribute seperated by a comma.</p>