Question

I got a div that expands on a click, sometimes its at the bottom of the page and its close to the bottom. What i want is that when its close to the bottom that it should scroll down just below it.

My solution so far is below. I get how to calculate the values and animate an all but i just dont get why my script wants to scroll to the bottom of the page, it just slams it to the bottom. Any ideas?

EDIT
Doh ofcause its gone scroll to the bottom. Question is how do i scroll so its just below my div by 10px? Im not suppose to say scrollTop: total

jquery

       var $ediv = $this.parent('div').find('.order-expand-row');
       var hDiv = $ediv.outerHeight();
       var oDiv = $ediv.offset().top;
       var wHeight = $(window).height();
       var total = hDiv + oDiv + 10;

       if (total >= wHeight) {                                   
          $('html, body').animate({ scrollTop: total }, 600);
       }

Answer 1

Well a cup of tea can do magic 😉

solved it by subtracting the wHeight from total, that got me the value i need to scroll to.
To clear it, what I needed was the position where i wanted to scroll to stop not where it should scroll to.

   var $ediv = $this.parent('div').find('.order-expand-row');
   var hDiv = $ediv.outerHeight();
   var oDiv = $ediv.offset().top;
   var wHeight = $(window).height();
   var total = hDiv + oDiv + 10;
   var scrollTo = total - wHeight; //the scroll position

   if (total >= wHeight) {                                   
      $('html, body').animate({ scrollTop: scrollTo }, 600);
   }