Question

我发现很多关于$('html, body').animate();的交叉行为的问题，但由于某些原因我找不到这个问题的答案：

我想（最后）删除$.browser，但同时不希望再次触发滚动事件两次，如果选择器为$('html, body) <，这将在某些浏览器中发生/ p>

// animte page scrolling
pageScroll : function( scrollTo, speed, callback ) {

    var rootElem;

    scrollTo = scrollTo || 0;
    speed = speed || 800;

    if ( $.browser.webkit ) {
        rootElem = $('body');
    } else {
        rootElem = $('html');
    }

    rootElem
        .stop()
        .animate(
            {
                scrollTop: scrollTo
            }, speed, callback
        );
}

Answer 1

我已经研究了很长一段时间了，除了检查doc准备工作之外，还没有找到真正的解决方案：

http://codepen.io/anon/pen/yyddER?editors=011

var mainelement;

$('html, body').animate({scrollTop: 1}, 1, function() {

if ($('html').scrollTop()) mainelement = $('html'); // FF and IE
if ($('body').scrollTop()) mainelement = $('body'); // Chrome, Safari and Opera
mainelement.scrollTop(0);
});

假设此处内容足够高，可以创建滚动条...

在主流浏览器上进行测试并顺利完成。

编辑 - 如果浏览器使用<html>作为溢出的主要元素，则确保用于滚动页面的触发器仅在一次操作时使用一种变体：

var mainelement, tested = false;

$('html, body').animate({scrollTop: 1}, 1, function() {

if ($('html').scrollTop()) mainelement = $('html');
else if ($('body').scrollTop()) mainelement = $('body');

if (!tested) {
tested = true;
mainelement.scrollTop(0);
}
});

+++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++

后来提出了这种方法（这似乎是效率最高的）：

http://codepen.io/anon/pen/NPQNEr?editors=001

var mainelement;

$(window).scrollTop(1);
if ($('html').scrollTop()) mainelement = $('html');
else if ($('body').scrollTop()) mainelement = $('body');
mainelement.scrollTop(0);

Answer 2

这是我在制作中使用的代码;工作得很好：

function ScrollPage(TheTop) {

    TheTop = parseInt(TheTop, 10);

    if (!$.isNumeric(TheTop)) { 

      return;
    }

    $('html,body').animate({ scrollTop: TheTop }, 400); 
}

如果问题是事件处理程序触发两次，则意味着该函数以某种方式被调用两次，因此该bug在其他地方。另一方面，$.browser()函数已被弃用了一段时间。

jQuery动画滚动没有$ .browser＆amp;没有开火两次

2 个答案: