Question

以下代码会导致我的页面奇怪地生成动画。当触发此事件的事件被激活时，html / body元素会下降几百个像素，然后慢慢滑动到浏览器的顶部。我需要页面滚动到roi计算器元素的顶部。有任何想法吗？这个代码完全适用于jsfiddle。

    var $roiCalculator = $(".roi-calculator");
    $(".roi-container .btn.yellow").on('click', function(){
        var offset = $roiCalculator.offset().top;

        $("html, body").animate({
            scrollTop: $(".roi-calculator").offset().top
        }, 3000);

    });

Answer 1

Zepto没有能力为scrollTop设置动画。由于所有动画都是通过css3完成的，因此您需要添加一个相对较小的垫片，minified或not。开发人员已经意识到这个问题，并且正在尝试为下一个版本修补它。

var offset = $roiCalculator.offset().top;
// Is Zepto loaded?      
if ('__proto__' in {}) {
  $.scrollTo({
      endY: offset,
      duration: 3000,
    // If needed
    // callback: function() {
    // }
  });
// It's jQuery
} else {
  $('html, body').animate({
    scrollTop: offset,
  }, 3000);
};

或更好，抽象它...

function scrollTo(offset, time) {
    if ('__proto__' in {}) {
      $.scrollTo({
          endY: offset,
          duration: time,
        // If needed
        // callback: function() {
        // }
      });
    } else {
      $('html, body').animate({
        scrollTop: offset,
      }, time);
    };
};

var offset = $roiCalculator.offset().top;
scrollTo(offset, 3000);

Answer 2

尝试将代码包装在 DOM ready 处理程序$(function() {...});中，以确保在执行jQuery代码之前已正确加载所有DOM元素：

$(function() {
    var offset = $roiCalculator.offset().top;
    $("html, body").animate({
        'scrollTop': offset
    }, 3000);
});

jQuery scrollTop动画无法正常工作

2 个答案: