您能否使同一页面锚点跳转到滚动位置而不是实际锚点？

Question

关于这个Dev page

标题文本下方的蓝色向下 "auto scroll" 箭头使用简单的锚点跳转到页面上的某个位置（还有一些 javascript 来减慢滚动速度，但我不认为就我的问题而言，这很重要）。

如您所见，我还使用 Skrollr 制作动画 objects，当您手动向下滚动时，当 iMac 到达页面顶部时，页面类型为 'sticks'。这就是我希望 "auto scroll" 箭头按钮跳转到并停止的地方。

现在，它滚动到该位置，但随后会继续滚动。

我试过将锚元素放在所有不同的位置，但 none 得到了所需的休息位置。这让我想知道您是否可以指定锚向下滚动到某个滚动位置（例如，300 像素）而不是实际的锚元素。

换句话说，当用户滚动 300 像素时，我的 skrollr 代码将监视器固定在页面顶部。所以这就是我需要 "auto scroll" 向下箭头跳转到的地方。

有人知道这是否可行，或者有其他想法吗？

谢谢！

Answer 1

你可以用一点点 javascript 来做到这一点 - 可能利用你已经拥有的东西来减慢滚动速度。你能post那个密码吗？

基本上，通过一种或另一种方法，您的滚动代码涉及告诉页面平滑地滚动到其目的地。您所要做的就是提供一个与自然预期不同的目的地。

Answer 2

如何修改您已经使用的 .scrollTop() 方法来滚动到监视器的顶部 div 而不是锚点？

$("a#anchor1").click(function(){
    $('html, body').animate({
        scrollTop: $("div#monitor").offset().top
    }, 2500);
    return false;
});

See JSFiddle.

如果您需要它滚动超过 div 几个像素以使其正常工作，那么您可以随时添加或减去该点。

$("a#anchor1").click(function(){
    $('html, body').animate({
        scrollTop: ($("div#monitor").offset().top) + 100
    }, 2500);
    return false;
});

See JSFiddle.

如果您想向下滚动一定数量的像素而不引用任何这些元素，只需在 body 元素上设置滚动。

$("a#anchor1").click(function(){
    $('html, body').animate({
        scrollTop: ($("body").offset().top) + 300
    }, 2500);
    return false;
});

See JSFiddle.

您可以在 jQuery's API documentation, or if you would rather use pure JS you can read about the HTML DOM scrollTop property here 中阅读有关 .scrollTop() 方法的更多信息。

您能否使同一页面锚点跳转到滚动位置而不是实际锚点？

Can you make same page anchor jump to a scroll position rather than an actual anchor?

html

anchor