【问题标题】:Scroll back to top page when button clicked and page changed单击按钮并更改页面时滚动回首页
【发布时间】:2018-11-12 15:13:45
【问题描述】:

我有一个多步骤表单,上面有一个多步骤进度条。对于多步骤表单,我使用带有“step1/2/3/4”作为 id 的选项卡窗格。当我在第一部分并向下滚动时,我想单击“下一部分”按钮。单击按钮后,它会将我带到下一部分,但在我向下滚动以单击按钮时的同一点。我想要做的是通过单击按钮更改部分时将我带到页面顶部。我尝试将此方法添加到我的 javascript 代码中,但它不起作用:

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

任何帮助将不胜感激!谢谢!

这是我的 JS 代码:

$(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);

  });
});

这是选项卡窗格底部的按钮:

<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>

【问题讨论】:

    标签: javascript jquery html forms progress-bar


    【解决方案1】:

    $(document).scrollTop(0)window.scrollTo(0, 0); 添加到$(".next-step").click$(".prev-step").click 函数

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-10-18
      • 1970-01-01
      • 1970-01-01
      • 2016-03-07
      • 2018-01-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多