Javascript 如何使用scrollTop滚动页面结束？
我需要将列表中的选定元素滚动到页面顶部。scrollTop（）在选定元素与顶部的距离小于可用滚动空间时工作。如果超过可用空间，它将只向上滚动屏幕的一部分（直到滚动空间用完）。请参阅（例如，选择element 24时，我希望列表项#24滚动到屏幕顶部） 我已经看了其他几个例子，例如，但这只是滚动到页面底部。它不会将页面底部移动到顶部 到目前为止，我的想法是在列表底部硬编码一段空白，并使其增大/缩小以允许更多的滚动，但我想知道是否有更好的方法来实现这一点。我对网络开发还不熟悉，老实说，这让我觉得很有黑客味Javascript 如何使用scrollTop滚动页面结束？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要将列表中的选定元素滚动到页面顶部。scrollTop（）在选定元素与顶部的距离小于可用滚动空间时工作。如果超过可用空间，它将只向上滚动屏幕的一部分（直到滚动空间用完）。请参阅（例如，选择element 24时，我希望列表项#24滚动到屏幕顶部） 我已经看了其他几个例子，例如，但这只是滚动到页面底部。它不会将页面底部移动到顶部 到目前为止，我的想法是在列表底部硬编码一段空白，并使其增大/缩小以允许更多的滚动，但我想知道是否有更好的方法来实现这一点。我对网络开发还不熟悉，老实说，这让我觉得很有
<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>
您可以通过计算前面的列表元素来计算所需的空间，将它们的高度作为边距底部添加到#滚动导航
这样就不需要在列表的底部添加额外的元素
$（'#滚动导航ul li'）。单击（函数（）{
//计算所需空间并添加到滚动导航
var marginBottom=（$（this.height（）*$（this.prevAll（'li'）.length）+$（'body'）.height（）；
控制台日志（marginBottom）；
$（“#滚动#导航”）.css（'margin-bottom'，marginBottom+'px'）；
var DISTANCETOBOTOM=$（“#滚动导航”）.scrollHeight-$（“#滚动导航”）.height（）-$（“#滚动导航”）.scrollTop（）；
$（'html，body'）.animate（{scrollTop:$（this.offset（）.top}，500）；
});
点击“#滚动导航”将列表项滚动到页面顶部
您可以通过计算前面的列表元素，将它们的高度作为边距底部添加到#滚动导航
来计算所需的空间
这样就不需要在列表的底部添加额外的元素
$（'#滚动导航ul li'）。单击（函数（）{
//计算所需空间并添加到滚动导航
var marginBottom=（$（this.height（）*$（this.prevAll（'li'）.length）+$（'body'）.height（）；
控制台日志（marginBottom）；
$（“#滚动#导航”）.css（'margin-bottom'，marginBottom+'px'）；
var DISTANCETOBOTOM=$（“#滚动导航”）.scrollHeight-$（“#滚动导航”）.height（）-$（“#滚动导航”）.scrollTop（）；
$（'html，body'）.animate（{scrollTop:$（this.offset（）.top}，500）；
});
点击“#滚动导航”将列表项滚动到页面顶部
这是一个基本问题的基本解决方案。就我个人而言，我会更改.container
上的填充底部
或空白底部
，@suryasing，因为这个答案不能解决问题。它只会滚动到底部，而我希望能够滚动到底部-我接受了下面的答案，将底部边距设置为等于上面元素的大小。这是一个基本问题的基本解决方案。就我个人而言，我会更改.container
上的填充底部
或空白底部
，@suryasing，因为这个答案不能解决问题。它只会滚动到底部，而我希望能够滚动到底部-我接受了下面的答案，将底部边距设置为与上面元素的大小相等。太棒了！添加另一个元素感觉不对，所以我更喜欢这种方式！谢谢当然，没问题。不过还是有点变化。我注意到，如果根据上一个列表项计算的页边距底部不够高，您将遇到与以前相同的问题。因此，我将主体高度添加到页边距底部
，以确保始终有足够的空间滚动到单击的列表项。玩得开心，太棒了！添加另一个元素感觉不对，所以我更喜欢这种方式！谢谢当然，没问题。不过还是有点变化。我注意到，如果根据上一个列表项计算的页边距底部不够高，您将遇到与以前相同的问题。因此，我将主体高度添加到页边距底部
，以确保始终有足够的空间滚动到单击的列表项。玩得高兴