JS scroll page to location by height

Question

I have a div, that increases size dynamically. On top of the page I have button "Add note". When I press "Add note" I want to scroll page to bottom of the page (where this new note appears). This is .aspx page on Sharepoint.

Currently I have this kind of solution, that doesn't work some why:

<a ng-click="AddNote()" onclick="GetMeetingsHeight()" href="#">Add note</a> <%-- Adds new note --%>

function GetMeetingsHeight() {
            var winHeight = $('.detailsdiv').height(); // It works, when I ask by class
            document.getElementById("winHei").innerHTML = winHeight;
            window.scrollTo(0, winHeight);
        }

if you always need to scroll to same place at the bottom, you can just use anchor, without any js. href="#footer" and it will scroll to element with id "footer", when you click on link — kpblc, Feb 02 '15 at 10:31
This post might help http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Erik, Feb 02 '15 at 10:32

Manoj · Answer 1 · 2015-02-02T10:36:38.723

0

Try this

 var sc = $('.detailsdiv').offset().top;
 $('body,html').animate({
     scrollTop: sc
  },'slow');

edited Feb 02 '15 at 10:36

answered Feb 02 '15 at 10:31

Manoj

4,593
2
25
54

1

`'div[class="detailsdiv"]'` is somehow bad, the css selector would be `'.detailsdiv'` – skobaljic Feb 02 '15 at 10:33
@skobaljic +1. also if you need more specificated selector you can use "div.detailsdiv" – kpblc Feb 02 '15 at 10:35

score 0 · Answer 2 · answered Feb 02 '15 at 12:51

Since there was somekind of strange problem with previous solutions, I mixed them up and got it working.

To bottom I added div as following <div id="footer"></div>

function GoToBottom() {
            var redir = document.URL;
            if (redir.indexOf("#footer") == -1)
                redir += "#footer";
            window.location.assign(redir);
        };

JS scroll page to location by height

2 Answers2