How can I scroll past the end of a page using scrollTop?

Question

I have a requirement to scroll a selected element in a list to the top of a page. scrollTop() works when the selected element's distance from the top is less than the available scroll space. If it is more than the available space, it will only scroll part way up the screen (until it runs out of scroll space). See the JSFiddle here (for example, when selecting element 24, I want list item #24 to scroll to the top of the screen).

I have taken a look at several other examples such as here but this only scrolls to the bottom of the page. It does not take the bottom of the page and move it to the top.

My idea so far is to hardcode a div of white space at the bottom of the list, and have this grow/shrink to allow for more scrolling, but I want to know if there's a nicer way of doing this. I'm new to web development, and this honestly feels very hack-ish.

<html> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js></script>
<script type="text/javascript">
 $(window).load(function(){
    $('#scroll_navigation ul li').click(function() {
    var distanceToBottom = $('#scroll_navigation').scrollHeight -$('#scroll_navigation').height() - $('#scroll_navigation').scrollTop();

    $('html,body').animate({scrollTop: $(this).offset().top}, 500);
}); 
});

</script>

</head>
<body>

<div id="scroll_navigation">
    <p>Catch any clicks in "#scroll_navigation" to scroll the list item to the top of the page</p>
    <div class="container">
        <ul>
            <li><a href="#Portfolio" title="">1</a></li>
            <li><a href="#Services" title="">2</a></li>
            <li><a href="#About" title="">3</a></li>
            <li><a href="#Contact" title="">4</a></li>
            <li><a href="#Portfolio" title="">5</a></li>
            <li><a href="#Services" title="">6</a></li>
            <li><a href="#About" title="">7</a></li>
            <li><a href="#Contact" title="">8</a></li>
            <li><a href="#Portfolio" title="">9</a></li>
            <li><a href="#Services" title="">10</a></li>
            <li><a href="#About" title="">11</a></li>
            <li><a href="#Contact" title="">12</a></li>
            <li><a href="#Portfolio" title="">13</a></li>
            <li><a href="#Services" title="">14</a></li>
            <li><a href="#About" title="">15</a></li>
            <li><a href="#Contact" title="">16</a></li>
            <li><a href="#Portfolio" title="">17</a></li>
            <li><a href="#Services" title="">18</a></li>
            <li><a href="#About" title="">19</a></li>
            <li><a href="#Contact" title="">20</a></li>
            <li><a href="#Portfolio" title="">21</a></li>
            <li><a href="#Services" title="">22</a></li>
            <li><a href="#About" title="">23</a></li>
            <li><a href="#Contact" title="">24</a></li>
            <li><a href="#Portfolio" title="">25</a></li>
            <li><a href="#Services" title="">26</a></li>
            <li><a href="#About" title="">27</a></li>
            <li><a href="#Contact" title="">28</a></li>
            <li><a href="#Portfolio" title="">29</a></li>
            <li><a href="#Services" title="">30</a></li>
            <li><a href="#About" title="">31</a></li>
            <li><a href="#Contact" title="">32</a></li>
            <li><a href="#Portfolio" title="">33</a></li>
            <li><a href="#Services" title="">34</a></li>
            <li><a href="#About" title="">35</a></li>
            <li><a href="#Contact" title="">36</a></li>
            <li><a href="#Portfolio" title="">37</a></li>
            <li><a href="#Services" title="">38</a></li>
            <li><a href="#About" title="">39</a></li>
            <li><a href="#Contact" title="">40</a></li>
            <li><a href="#Portfolio" title="">41</a></li>
            <li><a href="#Services" title="">42</a></li>
            <li><a href="#About" title="">43</a></li>
            <li><a href="#Contact" title="">44</a></li>
        </ul>
    </div>
    <div id="white-space" style="height: 0; width:100%; clear:both; border-style:solid">
</div>

http://stackoverflow.com/questions/4249353/jquery-scroll-to-bottom-of-the-page — surya singh, Sep 24 '15 at 20:19
It's a basic solution for a basic problem. Personally i would change either the `padding-bottom` or `margin-bottom` on `.container`, — Lars, Sep 24 '15 at 20:24
@suryasingh This answer doesn't solve the problem. It only scrolls to the bottom, whereas I want to be able to scroll past that - I've accepted the answer below to set a bottom margin equal to the size of the elements above. — Kerri, Sep 25 '15 at 13:03

DavidDomain · Accepted Answer · 2015-09-25T13:07:16.963

You could calculate the space you need by counting the previous list elements adding their height as margin-bottom to the #scroll_navigation.

That way it is not necessary to add an extra element at the bottom of the list.

$('#scroll_navigation ul li').click(function() {
  // calc the needed space and add to scroll_navigation
  var marginBottom = ($(this).height() * $(this).prevAll('li').length) + $('body').height();
  console.log(marginBottom);
  $('#scroll_navigation').css('margin-bottom', marginBottom + 'px');
  
  var distanceToBottom = $('#scroll_navigation').scrollHeight - $('#scroll_navigation').height() - $('#scroll_navigation').scrollTop();

  $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="scroll_navigation">
  <p>Catch any clicks in "#scroll_navigation" to scroll the list item to the top of the page</p>
  <div class="container">
    <ul>
      <li><a href="#Portfolio" title="">1</a></li>
      <li><a href="#Services" title="">2</a></li>
      <li><a href="#About" title="">3</a></li>
      <li><a href="#Contact" title="">4</a></li>
      <li><a href="#Portfolio" title="">5</a></li>
      <li><a href="#Services" title="">6</a></li>
      <li><a href="#About" title="">7</a></li>
      <li><a href="#Contact" title="">8</a></li>
      <li><a href="#Portfolio" title="">9</a></li>
      <li><a href="#Services" title="">10</a></li>
      <li><a href="#About" title="">11</a></li>
      <li><a href="#Contact" title="">12</a></li>
      <li><a href="#Portfolio" title="">13</a></li>
      <li><a href="#Services" title="">14</a></li>
      <li><a href="#About" title="">15</a></li>
      <li><a href="#Contact" title="">16</a></li>
      <li><a href="#Portfolio" title="">17</a></li>
      <li><a href="#Services" title="">18</a></li>
      <li><a href="#About" title="">19</a></li>
      <li><a href="#Contact" title="">20</a></li>
      <li><a href="#Portfolio" title="">21</a></li>
      <li><a href="#Services" title="">22</a></li>
      <li><a href="#About" title="">23</a></li>
      <li><a href="#Contact" title="">24</a></li>
      <li><a href="#Portfolio" title="">25</a></li>
      <li><a href="#Services" title="">26</a></li>
      <li><a href="#About" title="">27</a></li>
      <li><a href="#Contact" title="">28</a></li>
      <li><a href="#Portfolio" title="">29</a></li>
      <li><a href="#Services" title="">30</a></li>
      <li><a href="#About" title="">31</a></li>
      <li><a href="#Contact" title="">32</a></li>
      <li><a href="#Portfolio" title="">33</a></li>
      <li><a href="#Services" title="">34</a></li>
      <li><a href="#About" title="">35</a></li>
      <li><a href="#Contact" title="">36</a></li>
      <li><a href="#Portfolio" title="">37</a></li>
      <li><a href="#Services" title="">38</a></li>
      <li><a href="#About" title="">39</a></li>
      <li><a href="#Contact" title="">40</a></li>
      <li><a href="#Portfolio" title="">41</a></li>
      <li><a href="#Services" title="">42</a></li>
      <li><a href="#About" title="">43</a></li>
      <li><a href="#Contact" title="">44</a></li>
    </ul>
  </div>
</div>

Awesome! Adding another element felt wrong, so I like this way more! Thanks! — Kerri, Sep 25 '15 at 12:53
Sure, no problem. Made a little change though. I've noticed, that if the `margin-bottom` calculated from the prev list items is not tall enough you will have the same problem as before. So i added the body's height to the `margin-bottom` to make sure there is always enough space to scroll to the clicked list item. Have fun. — DavidDomain, Sep 25 '15 at 13:10

How can I scroll past the end of a page using scrollTop?

1 Answers1