JSFiddle - React, Tailwind, and code Playground

by Aamir Afridi

HTML

<div class="back">
      <button class="back" id="back">Back</button>
</div>

<div id="container">
<div class="question-container current">
     <h2>Question 1</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 2</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 3</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 4</h2>
     <button class="next"> Next   
     </button>
 </div>

<div class="question-container">
     <h2>Question 5</h2>
     <button class="next"> Next   
     </button>
 </div>
</div>

CSS

.back {
    position:fixed;
    z-index:1000;
}

.question-container {
  height:100%;
  padding:2em;
  background-color:blue;
  margin-top:20px;
}

JavaScript

(function() {
    var scrollTo = function(element) {
        console.log(element);
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    
    $('.next').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .question-container.current');
        var $next = $current.next().first();
        if ($next.length!=0) {
            $current.removeClass('current')
            $next.addClass('current');
            scrollTo($next);
        }
    });
    $('#back').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .question-container.current');
        var $prev = $current.prev().first();
        if ($prev.length!=0) {
            $current.removeClass('current')
            $prev.addClass('current');
            scrollTo($prev);
        }
    });
})();