Javascript scroll to dynamic element

Question

i am adding dynamic div element with id 'newid' and using another button, i am trying to scroll to that dynamic element. After adding few dynamic elements, when i press the scroll button, i am scrolled to the end (last div element) but it stops working. My overall goal for this testing is to scroll to a dynamic added element. I dont have basics to move on, so please someone help me in the right direction.

Below is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<button onclick="myfunction()">test</button> <button onclick="addElement()">Add Element</button>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odit, ipsa aspernatur reiciendis facere labore accusamus architecto perspiciatis minus ad perferendis, illo nisi doloribus id quidem corporis blanditiis vel itaque!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odit, ipsa aspernatur reiciendis facere labore accusamus architecto perspiciatis minus ad perferendis, illo nisi doloribus id quidem corporis blanditiis vel itaque!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odit, ipsa aspernatur reiciendis facere labore accusamus architecto perspiciatis minus ad perferendis, illo nisi doloribus id quidem corporis blanditiis vel itaque!</div>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odit, ipsa aspernatur reiciendis facere labore accusamus architecto perspiciatis minus ad perferendis, illo nisi doloribus id quidem corporis blanditiis vel itaque!</div>



<div id="demo">Test</div>

<script type="text/javascript">
function myfunction ()  { 
    document.getElementById('newid').scrollIntoView();
    //alert("test");

}

function addElement() {
    var element = document.createElement('div');
      element.id = "newid";
      document.body.appendChild(element);

     element.appendChild(document.createTextNode
     ('New id'));
}

</script>
</body>
</html>

Answer 1

function myfunction ()  { 
    var nodes = document.querySelectorAll('div.myclass');
    nodes[nodes.length-1].scrollIntoView();
}

function addElement() {
    var element = document.createElement('div');
    element.className ='myclass';
    element.appendChild(document.createTextNode('New div'));
    document.body.appendChild(element);
}

This code worked for me no matter how many I added. No jQuery needed.

Javascript scroll to dynamic element

Question

1 answers

solution1
1 ACCPTED 2014-08-19 18:08:13

Javascript scroll to dynamic element

Question

1 answers

solution1 1 ACCPTED 2014-08-19 18:08:13

solution1
1 ACCPTED 2014-08-19 18:08:13