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。

由于我想允许滚动，我必须执行以下操作。

更新javascript以指向滚动容器（正文）上的特定x，y滚动位置，而不是更改背景位置。有关'scrollLeft'和scrollTop与animate（）函数的使用，请访问此网站：http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
使身体溢出：自动;宽度：100％;身高：100％。这会在页面上放置水平/垂直滚动条，使其与浏览器窗口的宽度/高度相同。

使用JS指向页面上的特定位置

2 个答案:

代码

工作示例