你可以让相同的页面锚点跳转到滚动位置而不是实际的锚点吗？答案

【问题标题】：Can you make same page anchor jump to a scroll position rather than an actual anchor?你可以让相同的页面锚点跳转到滚动位置而不是实际的锚点吗？
【发布时间】：2023-03-23 21:33:01
【问题描述】：

在这个Dev page

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

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

现在，它会滚动到那个位置，但会继续往前走一点。

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

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

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

谢谢！

【问题讨论】：

谢谢你们俩。蒂姆的第三个选项正是我想要的。如果我发布了杰克想要的代码，我相信他会说同样的话（对此感到抱歉）。再次感谢！....

标签： html anchor

【解决方案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。

【讨论】：

【解决方案2】：

您可以使用一些 javascript 来完成 - 可能会利用您已经获得的内容来减慢滚动速度。你能发布那个代码吗？

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

【讨论】：