使用 jQuery 动画 scrollTop 总是从顶部开始

Posted 2023-05-08

【中文标题】使用 jQuery 动画 scrollTop 总是从顶部开始

【英文标题】：animating scrollTop with jQuery always starts from the top

【发布时间】：2013-05-22 19:00:57

【问题描述】：

我正在尝试将动画滚动顶部编程到当前页面上的位置。 我有一个固定菜单，左侧有一些链接，右侧有一些 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);

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

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

【问题讨论】：

嗨，你解决了这个问题吗？我有同样的问题=（

确保调用 jQuery animate 的函数不会同时被调用两次。我遇到了一个问题，即同一个函数被调用了两次，第一次是将 scrollTop 重置为 0，导致 div 跳转到动画。

【参考方案1】：

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

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

【参考方案2】：

而不是 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);

【讨论】：

如果我更改为 scrollTop()，偏移量数组仅填充零。 If the element can't be scrolled (e.g. it has no overflow or if the element is non-scrollable), scrollTop is set to 0.link