3

我正在尝试将动画 scrollTop 编程到当前页面上的位置。我有一个固定菜单，左侧有一些链接，右侧有一些 div 内容。单击菜单上的链接应动画到特定的 div。

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').offset().top);
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}

它的动画是正确的地方，但总是从顶部到特定的地方。为什么动画总是从顶部开始，你能帮我创造从一个地方到另一个地方的动画效果，而不是从顶部开始吗？

我还尝试使用“+=”计算距离和动画滚动顶部，但收到了与我之前提到的相同的效果。

4

2 回答 2

0

在您的点击处理程序中，您需要抑制默认行为，这显然包括滚动到窗口顶部：

$('a').click(function(event) {
  event.preventDefault();
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
});
于 2017-12-15T17:02:25.777 回答
-1

而不是 offset().top 使用 element.scrollTop，你想要元素的滚动位置，而不是元素的顶部位置，它只是它在屏幕上的位置（因为它可能已经向下滚动了）..

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollTop

http://api.jquery.com/scrollTop/

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').scrollTop()); //notice the change
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}
于 2013-05-27T22:37:23.050 回答