To Reset scroll position to newly added element

Question

In a container elements will be added and sorted dynamically. on clcik of add button i will add a new element to list. i want to set the scroll position to recently added element. Please help me out on this.

<div ng-repeat="items in listItems | orderby" style="height:500px;overflow-y:auto"> 
 <p id="scrollPosition{{items}}"> {{items}}</p>
</div>

I assume ur new item will be at the bottom of the div. You can then just scroll to bottom using this solution https://stackoverflow.com/a/270628/507203 — cjmling, Jun 15 '17 at 10:08
Since i am sorting the list, once i add the element i will be sorted accordingly. so i need to point to particular position — user123, Jun 15 '17 at 10:13
We need to see how you add the new element. To know how you can get the element in the DOM and then use parent element [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop). — Elfayer, Jun 15 '17 at 10:29
Hi @user123, please use snippets only if you have a working code, else just format the code using `` in the question, Thank you. — Alexis, Jun 15 '17 at 16:56
Thanks for all your help. i found the solution for the above issue using angular anchor scroll. adding the below two lines in add() function solves my issue. $location.hash('scrollPosition'+$scope.item); $anchorScroll(); — user123, Jun 20 '17 at 10:51

score 0 · Answer 1 · answered Jun 15 '17 at 09:58

0

When you add a new element just give it a unique ID as well and then simply use this javascript

location.href = "#";
location.href = "#myDiv";

answered Jun 15 '17 at 09:58

Raj

1,928
3
29
53

hasan · Answer 2 · 2017-06-15T11:32:48.340

You can use jquery animate function with $("div#YourContentDiv p:last-child").offset()

Also There is an angular animate example in Plunkr:

http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview:

$("body, html").animate({ 
      scrollTop: $("div#YourContentDiv p:last-child").offset().top 
 }, 600);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="YourContentDiv">
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p>new text</p>
  <p style="color:red">new line</p>

</div>

score 0 · Answer 3 · answered Jun 20 '17 at 11:02

<div ng-repeat="items in listItems | orderby" style="height:500px;overflow-y:auto"> 
<p id="scrollPosition{{items}}"> {{items}}</p>

//Controller

  $scope.add = function(item){

 $location.hash('scrollPosition'+item);
  $anchorScroll();
}

The above Angular anchor scroll resolves my issue.

score 0 · Answer 4 · answered Jun 20 '17 at 11:17

This one will definitely solve your problem. I have created this methods for myself.

Please note that this is made according to datatables scrolling. you need to update classes like '.dataTables_scrollBody' according to your code.

var scrollPosition =0;
function saveScrollPosition ( container ) {
    if ( $( container ) != undefined && $( container ).find( '.dataTables_scrollBody' ) != undefined ) {
        scrollPosition = $( container ).find( '.dataTables_scrollBody' ).scrollTop();
    } else {
        scrollPosition = 0;
    }

}

function setScrollPosition ( container ) {
    if ( $( container ) != undefined && $( container ).find( '.dataTables_scrollBody' ) != undefined ) {
        $( container ).find( '.dataTables_scrollBody' ).scrollTop( scrollPosition );
    } else {
        scrollPosition = 0;
    }
}

To Reset scroll position to newly added element

4 Answers4