lundi 26 juin 2017

Scroll/position to bottom when new info appears in Divs (via CheckBox Selection)

I'm working on a page the asks the user to select from checkboxes, as they make their selections new info appears (based on the selected checkboxes). I'd like for the window to auto scroll as new info appears on the page.

I've research this online and could not find a solition that matches my coding. This is an example of my code bellow. I tried to use variation of

element.scrollTop = element.clientHeight; 

and

var $objDiv = $("#logtext");

$objDiv.scrollTop( $objDiv.height() );

<html>
 
<head>
 
<script>
element.scrollTop = element.clientHeight;
</script>

 
<script> 
var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );
</script>
 
</head>
<body>
 

 
<form method="post" action="#">
 
 
  <h4>Select a fruit:</h4>
  <div>
    <div>
      <input type="checkbox" name="choice-apple” id="choice-apple” required>
      <label for="choice-apple”>Apple</label>
 
      <div class="reveal-if-active">
        <label for=“apple”><p><font color="purple">"I'm glad to Hear that!<br>Why do you like apples?”</label><br></p>
        <input type="button" value=“more apples" onclick = "location.href=‘apple1.html'">
      </div>
    </div>
 
<p><font color="black">
    <div>
 
      <input type="checkbox" name="choice-banana” id="choice-banana”>
      <label for="choice-banana”>Banana</label>
 
      <div class="reveal-if-active">
    <label for="negative"><p><font color="red">"I'm surprised to hear that. Why do you like bananas?</label><br></p>
        <input type="Button" value=“more bananas“ onclick = "location.href=‘bananas1.html'">
      </div>
    </div>
  </div>
 
</form>
<br> 
</html>

Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire