你们能让同一个页面锚跳转到滚动位置而不是实际的锚吗

  • 本文关键字:位置 滚动 同一个 html anchor
  • 更新时间 :
  • 英文 :


在此开发页面上

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

正如你所看到的,我也在使用Skrollr来制作对象的动画,当你手动向下滚动时,当iMac到达页面顶部时,页面会"粘住"。这就是我想要"自动滚动"箭头按钮跳到并停止的地方。

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

我试过把锚元素放在所有不同的地方,但没有一个得到想要的休息位置。这让我想知道是否可以指定锚点向下滚动到某个滚动位置(例如,300像素),而不是实际的锚点元素。

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

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

谢谢!

修改已经用于滚动到监视器div顶部而不是锚点的.scrollTop()方法怎么样?

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

参见JSFiddle。

如果你需要它滚动几个像素超过这个div以使它正确工作,那么你总是可以添加或减去这个点。

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

参见JSFiddle。

如果你想在不参考任何元素的情况下向下滚动一定数量的像素,只需在body元素上设置滚动即可。

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

参见JSFiddle。

您可以在jQuery的API文档中阅读更多关于.scrollTop()方法的信息,或者如果您更愿意使用纯JS,您可以在这里阅读有关HTMLDOMscrollTop属性的信息。

您可以用一个小javascript来完成这项工作——可能会利用您已经具备的功能来减慢滚动速度。你能发布那个代码吗?

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

最新更新