Scroll to next question survey

by mrjordy

HTML

<div class="meetingBuilderContainer">
  Automatic Meeting Builder
  <div class="mockViewPort">
    <div class="questionSet1">
      <div class="Question" id="Q1">How many people will be attending?</div>
      <div class="Answer" id="Q1A1">2-5</div>
      <div class="Answer" id="Q1A2">6-15</div>
      <div class="Answer" id="Q1A3">16-49</div>
      <div class="Answer" id="Q1A4">50+</div>
      <span class="dontAdd jumptoQ2">Skip this step</span>
      <div class="fauxPageBreak"></div>
      <div id="Q1A1R" class="Result">"Standup" style meeting suggested.
        <br/><em>Standup definition</em>
        <br/>
        <br/><span class="Add jumptoQ2" onclick="textChange()">Add and continue</span> <span class="dontAdd jumptoQ2">Skip this step</span>
      </div>
      <div class="fauxPageBreak"></div>
      <div id="Q1A2R" class="Result">"Small Room" meeting style suggested.
        <br/><em>Small Room Meeting Definition</em>
        <br/>
        <br/><span class="Add jumptoQ2">Add and continue</span> <span class="dontAdd jumptoQ2">Skip this step</span>
      </div>
      <div class="fauxPageBreak"></div>
      <div id="Q1A3R" class="Result">"Large Room" meeting style suggested.
        <br/><em>Large Room Meeting Definition</em>
        <br/>
        <br/><span class="Add jumptoQ2">Add and continue</span> <span class="dontAdd jumptoQ2">Skip this step</span>
      </div>
      <div class="fauxPageBreak"></div>
      <div id="Q1A4R" class="Result">"Conference Hall" meeting style suggested.
        <br/><em>Conference Hall Meeting Definition</em>
        <br/>
        <br/><span class="Add jumptoQ2">Add and continue</span> <span class="dontAdd jumptoQ2">Skip this step</span>
      </div>
    </div>

    <div class="fauxPageBreak"></div>
    <div class="questionSet2">
      <div class="Question" id="Q2">Question 2</div>
      <div class="Answer" id="Q2A1">a1</div>
      <div class="Answer" id="Q2A2">a2</div>
      <div class="Answer" id="Q2A3">a3</div>
      <div...

CSS

.meetingBuilderContainer {
  font-family: kalinga;
}

.mockViewPort {
  width: 360px;
  height: 160px;
  border: 2px solid blue;
  overflow-y: hidden;
  padding: 10px;
  font-size: 12px;
}

.fauxPageBreak {
  height: 200px;
}

.Answer:hover {
  cursor: pointer;
  color: blue;
}

.Add,
.dontAdd {
  border: 1px solid blue;
  padding: 2px 4px;
  color: blue;
  font-size: 11px;
}

.Add:hover,
.dontAdd:hover {
  cursor: pointer;
  background: blue;
  color: white;
}

JavaScript

$(".Answer").click(function() {
  var jumpTo = "#" + ($(this).attr("id") + "R");
  $(".mockViewPort").animate({scrollTop: 0}, 0);
  $(".mockViewPort").animate({scrollTop: (-44) + $(jumpTo).offset().top},500);
  return true;
});
//------------------------------ jump to question 2 test -------------------------------
$(".jumptoQ2").click(function() {
  $(".mockViewPort").animate({scrollTop: 0}, 0);
  $(".mockViewPort").animate({scrollTop: (-44) + $("#Q2").offset().top
  }, 500);
  return true;
});
//------------------------------ jump to question 3 test -------------------------------
$(".jumptoQ3").click(function() {
  $(".mockViewPort").animate({scrollTop: 0}, 0);
  $(".mockViewPort").animate({scrollTop: (-44) + $("#Q3").offset().top
  }, 500);
  return true;
});