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

【问题标题】：Point to a specific location on the page using JS使用JS指向页面上的特定位置
【发布时间】：2012-01-06 12:46:19
【问题描述】：

我正在创建一个包含许多部分的大页面，这样页面看起来就像一个巨大的画布，用户可以滚动到它的不同部分。类似本站：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);
    }
});

这适用于滚动条上方的锚点；但是，如果锚点位于滚动条下方，则不起作用。

有谁知道如何解决这个问题？无论滚动在哪里，如何让链接始终指向页面上的正确锚点？

非常感谢！！诺亚

【问题讨论】：

您应该为您的问题使用适当的标签。 “指针”是指内存指针，就像在 C/C++ 中一样。 “node.js”是一个用于客户端/服务器交互的 JavaScript 库。 “scrollview”通常是指包含要滚动的东西的 gui 元素。适当的标签是：jquery、layout、animation

标签： jquery layout animation

【解决方案1】：

代码

我一般用这个sn-p：

$('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

【讨论】：

我尝试将这个 sn-p 粘贴到我的 JS 文件的顶部，但现在菜单链接根本不起作用，甚至无法点击。我是否将此 sn-p 放置在错误的位置？
roman 的答案以选择器“a[href^=#]”开头，即每个元素 a 都具有以“#”开头的 href 属性。您使用了以下选择器： ul#menu a 将针对 ul[id="menu"] 中的每个 a （链接和可能具有 name 属性的锚点），但在此特定 #menu 之外没有元素
@Noa，在 jsfiddle 上添加了一个示例
那我该怎么写呢？抱歉，我是一个真正的新手...我刚刚尝试使用罗马代码删除 ul#menu，但链接现在根本不起作用...

【解决方案2】：

这就是我解决问题的方法：示例页面使用背景位置来移动背景画布。这在没有滚动的情况下很好，因为容器的 0,0 位置总是位于窗口的左上角。但是，当用户手动滚动时，容器的 0,0 位置现在隐藏在浏览器可见部分的上方和左侧（即画布不再调整为容器的 0,0）。因此，当点击菜单，背景位置发生变化时，用户仍然在查看浏览器左上角为+x和+y的点，而不是容器的0,0。

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

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

【讨论】：