Question

在此Dev page

上

标题文字下方的蓝色向下“自动滚动”箭头使用一个简单的锚点跳转到页面上的某个位置（和一些javascript来减慢滚动速度，但我不认为这对我的问题很重要去）。

正如您所看到的，我还使用Skrollr为对象设置动画，当您手动向下滚动时，页面会在iMac到达页面顶部时“粘住”。这就是我想要“自动滚动”箭头按钮跳转到停止的地方。

现在，它滚动到那个位置，但随后继续前进。

我已经尝试将锚元素放在所有不同的位置，但没有一个得到理想的休息位置。这让我想知道你是否可以指定一个锚点向下滚动到某个滚动位置（例如，300像素）而不是实际的锚元素。

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

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

谢谢！

Answer 1

如何修改已使用的.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中详细了解.scrollTop()方法，或者如果您更愿意使用纯JS，则可以阅读HTML DOM scrollTop property here。

Answer 2

你可以用一些小的javascript来做 - 可能会利用你已经在那里的内容来减慢滚动速度。你可以发布那段代码吗？

基本上，通过一种或另一种方法，滚动代码包括告诉页面顺利滚动到目的地。您所要做的就是提供与其自然期望的不同的目的地。

你可以将同一页面锚点跳转到滚动位置而不是实际锚点吗？

2 个答案: