javascript - jQuery .offset()在每种浏览器中都无法正常工作

我定义了这些变量：

var about = 0;
var music = $('.music-main').offset();
var programming = $('.programming-main').offset();
var contact = $('.contact-main').offset();

然后在单击按钮时尝试动画​​化滚动到我页面上的特定部分。

 case 0: $("html, body").animate({ scrollTop: 0}); break;
 case 1: $("html, body").animate({ scrollTop: music.top}); break;
 case 2: $("html, body").animate({ scrollTop: programming.top}); break;
 case 3: $("html, body").animate({ scrollTop: contact.top}); break;

但它会滚动到其他位置。每个元素甚至滚动到一个不同的位置。

最佳答案

确保仅在页面加载后调用偏移量，否则坐标将不正确。

所以做这样的事情：

$( window ).load(function() {
  var about = 0;
  var music = $('.music-main').offset();
  var programming = $('.programming-main').offset();
  var contact = $('.contact-main').offset();
}

最好在单击时计算偏移量，这样在加载和单击之间的页面大小更改将不会产生任何影响：

var about = 0;
var music = $('.music-main');
var programming = $('.programming-main');
var contact = $('.contact-main');

case 0: $("html, body").animate({ scrollTop: 0}); break;
case 1: $("html, body").animate({ scrollTop: music.offset().top}); break;
case 2: $("html, body").animate({ scrollTop: programming.offset().top}); break;
case 3: $("html, body").animate({ scrollTop: contact.offset().top}); break;

关于javascript - jQuery .offset()在每种浏览器中都无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25290411/