我需要将列表中的选定元素滚动到页面顶部。当所选元素与顶部的距离小于可用滚动空间时，scrollTop（）有效。如果它超过可用空间，它将仅向上滚动屏幕（直到它用完滚动空间）。请参阅JSFiddle here（例如，选择元素24时，我希望列表项目＃24滚动到屏幕顶部）。
我已经看了几个其他的例子，例如here，但这只是滚动到页面的底部。它不会占据页面底部并将其移至顶部。
到目前为止，我的想法是对列表底部的一个白色空间进行硬编码，并使其增长/缩小以允许更多滚动，但我想知道是否有更好的方法来执行此操作。我是网络开发的新手，这真的很让人觉得很糟糕。
<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>
答案 0 :(得分：0)
您可以通过计算以前的列表元素来计算所需的空间，将其高度margin-bottom添加到#scroll_navigation。
这样就没有必要在列表的底部添加额外的元素。
$('#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>