Jquery прокручивается до конца страницы - PullRequest
2 голосов
/ 15 апреля 2011

Я использую jquery для прокрутки к разделам моей страницы.

Вот код:

// Scroll to element
$('#menu li a').click(function(){        
    var elementId = $(this).attr('href');   
    $('html, body').animate({ scrollTop: $(elementId).offset().top }, 1600);
    return false;
    });

<ul id="menu">
  <li><a href="#item1">1</a></li>
  <li><a href="#item2">2</a></li>
</ul>

<div id="item-1">placeholder-1</div>
<div id="item-2">placeholder-2</div>

Как вы видите, я беру href (#id) целевого элемента из ссылки меню и прокручиваю до целевого элемента.

Но проблема заключается в том, что у меня есть целевые элементы, идущие прямо к нижней части страницы, и когда страница прокручивается до последней, верхняя часть этого элемента не может прокручиваться до верхней части страницы, так как внизу страницы не хватает ... Имею ли я смысл?

Я пытаюсь найти решение с использованием css или jquery, которое будет означать, что независимо от высоты страницы (или отступа / поля внизу) элемент будет в верхней части области просмотра, когда элемент меню щелкают.

Можно ли добавить дополнительные отступы в зависимости от высоты области просмотра, используя JavaScript? Использую ли я какой-нибудь трюк с переполнением?

Ответы [ 2 ]

4 голосов
/ 15 апреля 2011

Ваша проблема в том, что страница не такая высокая, как вы хотите.Если вы попытаетесь перейти к #x, а #x будет в нижней части <body>, тогда вы прокрутите страницу вниз, а #x будет в нижней части окна, когда вы захотитеверх.

Я думаю, что ваш единственный выбор - заставить <body> быть выше.Примерно так:

$(document).ready(function() {
    viewport_height = $(window).height();
    $height_hack    = $('<div>&nbsp;</div>').height(viewport_height);
    $('body').append($height_hack);
});

Примерно так добавится (визуально) пустой <div> в конец вашего контента, этот дополнительный <div> будет иметь ту же высоту, что и окно просмотра браузера, и этот дополнительныйВысота позволит вам всегда прокручивать свои элементы прямо к вершине области просмотра.

0 голосов
/ 15 апреля 2011

Я думаю, что есть много вещей, которые вы можете сделать, чтобы решить эту проблему, но я бы использовал CSS min-height Property до body. Я считаю, что это скорее личный ответ, так что вы можете делать все, что хотите, как вы сказали, добавить отступы, поля ...

Но я бы установил минимальную высоту так, чтобы экран мог прокручивать до элементов, которые вы хотите.


Обновление

Хмм, верно. Я не думал о динамическом контенте. Если содержимое становится больше, минимальная высота тела, вероятно, не решит проблему.

...