单击按钮并更改页面后，滚动回到首页

Question

I'm having a multi-step form with a multi-step progress bar above. For the multi-step form I'm using tab-panes with "step1/2/3/4" as id's. When I'm at the first section and I scroll down, I want to click the "Next Section" button. After the button is clicked, it takes me to the next section but at the same point I was when I scrolled down to click the button. What I want to do is to take me to the top of the page when the section is changed by clicking the button. I tried to add this method into my javascript code but it doesn't work:

$(document).ready(function(){
    $(this).scrollTop(0);
});

Any help would be appreciated! Thanks!

Here is my JS code:

$(document).ready(function () {
  //Initialize tooltips
  $('.nav-tabs > li a[title]').tooltip();

  // METHOD FOR THE PROGRESS BAR 
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

    var $target = $(e.target);

    if ($target.parent().hasClass('disabled')) {
      return false;
    }
  });

  // NEXT STEP METHOD - WHEN BUTTON CLICKED TAKES TO THE NEXT SECTION
  $(".next-step").click(function (e) {

    var $active = $('.progressbar .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);

  });


  // PREVIOUS STEP METHOD - WHEN BUTTON CLICKED TAKES TO THE PREVIOUS SECTION
  $(".prev-step").click(function (e) {

    var $active = $('.progressbar .nav-tabs li.active');
    prevTab($active);

  });
});

And this is the button from the bottom of the tab-pane:

<button type="button" name="next" class="next proceed-to-payment next-step" value="Proceed to Payment">Proceed to Payment</button>
 <button type="button" name="previous" class="previous back-to-cart prev-step" value="Back" id="back-to-cart-id">Back</button>

Answer 1

Add $(document).scrollTop(0) or window.scrollTo(0, 0); to the $(".next-step").click and $(".prev-step").click functions