Укажите на определенное место на странице с помощью JS

Question

Я создаю большую страницу со множеством разделов, чтобы страница выглядела как один огромный холст, и пользователи могли прокручивать его до разных разделов. Аналогично этому сайту: http://www.yourauxiliary.com/ Разница лишь в том, что на моем сайте пользователи также могут использовать полосы прокрутки:

overflow: scroll;

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

Изначально у меня был этот код в JS для каждой из опорных точек:

$("ul#menu a#link1").click(function(event){
    $('#pane-container').stop().animate({'left':'0px', 'top':'0px'},scrollSpeed);
    event.preventDefault();
}

$("a#link2").click(function(event){
    $('#pane-container').stop().animate({'left':'-1000px', 'top':'0px'},scrollSpeed);
    event.preventDefault();
}

$("a#link3").click(function(event){
    $('#pane-container').stop().animate({'left':'-2000px', 'top':'0px'},scrollSpeed);
    event.preventDefault();
}

и т.д.. для всех 8 ссылок.

Этот код работает нормально, если я не разрешаю прокрутку. Поскольку мне нужны полосы прокрутки, я добавил это к каждой точке привязки:

$("ul#menu a#link1").click(function(node){
    $('#pane-container').stop().animate({'left':'0px', 'top':'0px'},scrollSpeed);
    event.preventDefault();
    var parent = node.parent;
    var parentCHeight = parent.clientHeight;
    var parentSHeight = parent.scrollHeight;

    if (parentSHeight > parentCHeight) {
        var nodeHeight = node.clientHeight;
        var nodeOffset = node.offsetTop;
        var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
        parent.scrollTop = scrollOffset;
    }

    if (parent.parent) {
        scrollIntoView(parent);
    }
});

Это хорошо работает для опорных точек, которые находятся выше, где находится полоса прокрутки; однако, это не работает, если точка привязки находится ниже полосы прокрутки.

Кто-нибудь знает, как это решить? Как вы получаете ссылку, чтобы всегда указывать на правильную точку привязки на странице, независимо от того, где находится прокрутка?

Большое спасибо !! Noa

Answer 1

Код

Я обычно использую этот фрагмент:

$('a[href^=#]').click(function(e) {
  e.preventDefault();
  var hash = $(this).attr('href');
  var that = $(hash)[0];
  var mem = that.id;
  that.id += '-tmp';
  location.hash = hash;
  that.id = mem;
  $('html, body').animate({
    scrollTop: $(that).offset().top
  }, 500);
});

автоматически применяется ко всем ссылкам привязки, прокручивается до их ссылочной позиции и меняет знак # на панели местоположения.

Рабочий пример

http://jsfiddle.net/8tuL4

Answer 2

Вот как я решил проблему: страница примера использует положение фона для перемещения фонового холста.Это хорошо, когда нет прокрутки, потому что позиция 0,0 контейнера всегда находится в левом верхнем углу окна.Однако, когда пользователь прокручивает вручную, позиция 0,0 контейнера теперь скрыта вверх и влево от видимой части браузера (т. Е. Холст больше не настраивается на 0,0 контейнера).Таким образом, при щелчке по меню и изменении положения фона пользователь по-прежнему просматривает точку, в которой верхний левый угол браузера равен + x и + y, а не 0,0 для контейнера.

Поскольку IЧтобы разрешить прокрутку, мне нужно было сделать следующее.

1. обновить javascript, чтобы указывать на конкретные x, y позиции прокрутки в контейнере прокрутки (теле), а не изменять фоновую позицию.Посетите этот веб-сайт для использования scrollLeft и scrollTop с функцией animate (): http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

2. переполнение тела: auto;ширина: 100%;высота: 100%.Это поместило горизонтальные / вертикальные полосы прокрутки на страницу и сделало ее равной ширине / высоте окна браузера.