在此开发页面上
标题文本下的蓝色向下"自动滚动"箭头使用一个简单的锚点跳转到页面上的某个位置(还有一些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来完成这项工作——可能会利用您已经具备的功能来减慢滚动速度。你能发布那个代码吗?
基本上,通过一种或另一种方法,滚动代码包括告诉页面平稳地滚动到目的地。你所要做的就是提供一个与自然期望不同的目的地。