У меня есть требование прокрутить выбранный элемент в списке вверху страницы. scrollTop() работает, когда расстояние выбранного элемента от вершины меньше доступного пространства прокрутки. Если это больше, чем доступное пространство, он будет прокручивать часть вверх по экрану (пока не закончится пробел). См. JSFiddle here (например, при выборе элемента 24 я хочу, чтобы элемент списка # 24 прокручивался до верхней части экрана).Как прокрутить страницу до конца страницы с помощью scrollTop?
Я рассмотрел несколько других примеров, таких как here, но это только прокрутки в нижней части страницы. Он не занимает нижнюю часть страницы и перемещает ее вверх.
Моя идея до сих пор заключается в том, чтобы жестко закодировать div пробела в нижней части списка, и чтобы это увеличилось/уменьшилось, чтобы позволить больше прокрутки, но я хочу знать, есть ли более хороший способ сделать это. Я новичок в веб-разработке, и это, честно говоря, очень хаки.
<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 –
Это базовое решение для базовой задачи. Лично я бы изменил либо «padding-bottom», либо «margin-bottom» на '.container', – Lars
@suryasingh. Этот ответ не решает проблему. Он только прокручивается вниз, в то время как я хочу иметь возможность прокручивать прошлое, - я принял ответ ниже, чтобы установить нижнее поле, равное размеру элементов выше. – Kerri