Javascript 内容选项卡-滚动至div内容的

我正在使用一个带有“下一步”和“上一步”按钮的内容选项卡进行导航

这里的问题是，向下滚动到内容的底部，然后单击“下一步”按钮，它会转到下一个div，但会停留在页面的底部

单击“下一步/上一步”按钮时如何向上滚动

这是密码

$(document).ready(function(){
  var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length) {           
            widget.show();          
            widget.not(':eq('+(current++)+')').hide();
            setProgress(current); 
            //alert("I was called from btnNext");
        }       
       hideButtons(current);    
   });

  // Back button click action   
  btnback.click(function(){         
      if(current > 1){
            current = current - 2;
            btnnext.trigger('click');
        }
        hideButtons(current);
    });     
});

// Change progress bar action
setProgress = function(currstep){
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar")
        .css("width",percent+"%")
        .html(percent+"%");     
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();     
  if(current > 1) btnback.show();
    if(current == limit) { btnnext.hide(); btnsubmit.show(); }
}

$（文档）.ready（函数（）{
无功电流=1；
小部件=$（“.step”）；
btnnext=$（“.next”）；
btnback=$（“.back”）；
btnsubmit=$（“.submit”）；
//初始化按钮和用户界面
widget.not（':eq（0）'）.hide（）；
隐藏按钮（当前）；
设定进度（当前）；
//下一步按钮单击操作
btnnext.单击（函数（）{
if（当前1）{
电流=电流-2；
btnnext.trigger（'click'）；
}
隐藏按钮（当前）；
});     
});
//更改进度条操作
setProgress=函数（currstep）{
var percent=parseFloat（100/widget.length）*currstep；
百分比=固定的百分比（）；
$（“.progress bar”）
.css（“宽度”，百分比+“%”）
.html（百分比+“%”）；
}
//根据当前步骤隐藏按钮
hideButtons=功能（当前）{
var limit=parseInt（widget.length）；
$（“.action”）.hide（）；
如果（电流<限制）btnnext.show（）；
如果（当前>1）btnback.show（）；
如果（当前==限制）{btnnext.hide（）；btnsubmit.show（）；}
}

---

我已经检查了您的代码，您只需打电话

 scrollTo({ top: 0, behavior: 'smooth' });

在您的按钮点击和它的完成，检查工作的例子

也可以使用jQuery的animate（）函数

像这样,

$("html, body").animate({ scrollTop: 0 }, 600);

$（文档）.ready（函数（）{
无功电流=1；
小部件=$（“.step”）；
btnnext=$（“.next”）；
btnback=$（“.back”）；
btnsubmit=$（“.submit”）；
//初始化按钮和用户界面
widget.not（':eq（0）'）.hide（）；
隐藏按钮（当前）；
设定进度（当前）；
//下一步按钮单击操作
btnnext.单击（函数（）{
if（当前1）{
电流=电流-2；
btnnext.trigger（'click'）；
}
隐藏按钮（当前）；
滚动到（{top:0，行为：'smooth'}）；
});		
});
//更改进度条操作
setProgress=函数（currstep）{
var percent=parseFloat（100/widget.length）*currstep；
百分比=固定的百分比（）；
$（“.progress bar”）
.css（“宽度”，百分比+“%”）
.html（百分比+“%”）；
}
//根据当前步骤隐藏按钮
hideButtons=功能（当前）{
var limit=parseInt（widget.length）；
$（“.action”）.hide（）；
如果（电流<限制）btnnext.show（）；
如果（当前>1）btnback.show（）；
如果（当前==限制）{btnnext.hide（）；btnsubmit.show（）；}
}

.container{填充底部：200px！重要}

第1步Lorem ipsum dolor sit amet，奉献精英。一个优秀而完美的人。莫里斯·汀西顿·亨德雷特预示着一个温和的人。在《马莱苏阿达的前传》中，科苏斯·奥奇·维尔，弗林利亚·奥古斯。虎口浮雕和肘部浮雕同侧前庭；努克·洛博蒂斯·埃尼姆。这是一个非常重要的问题。这一切都是为了我们的未来。毛里斯·波苏尔·马萨。Nam pretium arcu nisl，位于意大利维韦拉尼布显贵酒店。伊库利斯是一位智者，他是一位智者和智者的精英。这是我的名言。
发酵液中的溶菌素具有双重功效。同侧电视晨曦。毛里斯拍卖商毛里斯·埃吉特·特里斯蒂克元素。比本杜姆葡萄园。阿利夸姆欧盟发酵剂多洛。克拉斯·奥纳雷和前欧盟权杖。不平等设施、viverra nunc eget、hendrerit侵权人。由laoreet lacinia制作的康瓦利葡萄。埃尼安和自由港口，马克西姆斯·麦格纳和尤特里斯东部。佩伦茨克的拉西尼亚之门。梅塞纳斯元素调味品是一种独特的调味品。佩伦茨克·艾库利斯拍卖人胡斯托（justo），我是特尔皮斯·马克西姆斯·内克（turpis maximus nec）。
奎斯克·布兰迪·莱克图斯酒后驾车，在弗尼图姆·乌纳·菲尼布斯诺。大相是一种不可否认的行为。不，这是一颗钻石。这是一种有效的生活方式。我的天哪。利奥·马萨（leo massa）家族的阿利奎姆·马萨（Aliquam feugiat），欧盟的尤兰科公司（ullamcorper augue tincidunt vitae）。交通工具维瓦摩斯坐在阿梅特·勒勒姆·坦普斯的座位上，欧盟ultrices dui laoreet。
多奈克·维韦拉·康斯奎特·比勒蒂姆。前庭非猫胎病、黄花芸香、小金花。在尼布岛上过着幸福的生活，在努克岛上坐着一位智者。在马萨的威尼斯，这是一个非大城市。Duis congue是一种不健康的饮食。前庭最宽，弓状体最宽，外翻舌苔最宽。埃尼安·奎斯·普鲁斯·奥迪奥。在molestie quam的Maecenas，sed semper ante。Aenean ac eros调味品、sagittis苏打水、semper mauris。梅特斯酒后驾驶，马蒂斯无内克驾驶，前庭软弱无力。杜伊斯调味品玉米饼nec massa ullamcorper Comodo。hendrerit vulputate中的Fusce efficitur dui。不为他人谋取生命，不为他人谋取尊严。Donec eleifend lacus finibus auctor ultricies。这是一个很好的例子。Etiam scelerisque tellus非scelerisque cursus。
步骤2
Lorem ipsum dolor sit amet，是一位杰出的献身者。纳拉佩林酒店