Content tab - Scroll to of the div content

Question

I am using a content tab with NEXT and BACK button for navigation.

The problem here is, scroll down to the bottom of the content and click on the NEXT button, it goes to next div but it stays on the bottom of the page.

How do I scroll top when I click on the NEXT/BACK button?

here is the code

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

CODEPEN

Answer 1

I have checked your code, all you need to do is, just call

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

on both your button click and its done, check working example.

you can also use jQuery's animate() function,

like this,

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

 $(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); scrollTo({ top: 0, behavior: 'smooth' }); }); // Back button click action btnback.click(function(){ if(current > 1){ current = current - 2; btnnext.trigger('click'); } hideButtons(current); scrollTo({ top: 0, behavior: 'smooth' }); }); }); // 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(); } }

 .container{padding-bottom:200px !important}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="step well">Step 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio. Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec. Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet. Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div> <div class="step well" style="background-color: brown">Step 2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio. Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec. Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet. Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio. Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec. Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet. Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</div> <div class="step well" style="background-color: green">Step 3 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio. Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec. Quisque blandit lectus dui, at fermentum urna finibus non. Phasellus id magna sit amet ligula dictum suscipit id non neque. Nam vel elit a diam mattis consectetur quis ac nulla. Fusce varius efficitur quam vitae eleifend. Proin id cursus metus. Aliquam feugiat leo massa, eu ullamcorper augue tincidunt vitae. Vivamus vehicula tellus sit amet lorem tempus, eu ultrices dui laoreet. Donec viverra consequat ante a pretium. Vestibulum non felis molestie, rutrum tellus non, tincidunt nunc. Vivamus vel nibh sit amet sapien volutpat eleifend at vel nunc. Cras lacus est, consectetur non magna in, venenatis feugiat massa. Duis congue imperdiet imperdiet. Quisque id est vestibulum, cursus turpis at, vulputate ligula. Aenean quis purus odio. Maecenas at molestie quam, sed semper ante. Aenean ac eros condimentum, sodales ex sagittis, semper mauris. Praesent metus dui, mattis non neque in, vestibulum mollis purus. Duis condimentum tortor nec massa ullamcorper commodo. Fusce efficitur dui in hendrerit vulputate. Vivamus non nulla vitae ante lobortis dignissim sit amet non orci. Donec eleifend lacus finibus auctor ultricies. Duis scelerisque eleifend tellus nec mattis. Etiam scelerisque tellus non scelerisque cursus.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque a elit et finibus. Mauris tincidunt hendrerit augue a blandit. In in ante malesuada, cursus orci vel, fringilla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc a lobortis enim. Proin nec quam et arcu venenatis malesuada. Proin et augue sit amet eros egestas posuere sed ut enim. Mauris a posuere massa. Nam pretium arcu nisl, at viverra nibh dignissim in. Quisque iaculis, diam sit amet blandit interdum, elit ante facilisis mi, in vulputate enim nisi et sapien. Vivamus eget dictum odio. Duis efficitur sollicitudin fermentum. Morbi ac tellus ipsum. Mauris auctor elementum mauris eget tristique. Nunc varius bibendum volutpat. Aliquam eu fermentum dolor. Cras ornare et ex eu scelerisque. Aliquam non quam facilisis, viverra nunc eget, hendrerit tortor. Fusce convallis arcu sed laoreet lacinia. Aenean et libero porttitor, maximus magna et, ultrices est. Pellentesque porta lectus a semper lacinia. Maecenas elementum condimentum erat id bibendum. Pellentesque iaculis auctor justo, id aliquet turpis maximus nec.</div> <button class="action back">Back</button> <button class="action next">Next</button> <button class="action submit btn btn-success">Submit</button> </div> </div> </div>