点击页面滚动在 FF 中有效，但在 Chrome 中无效答案

【问题标题】：On click page scroll works in FF, but not in Chrome点击页面滚动在 FF 中有效，但在 Chrome 中无效
【发布时间】：2015-04-23 15:19:19
【问题描述】：

我的网站上有一个垂直导航点击功能，在 Firefox、IE10 和 IE9 中运行良好，但在 Chrome 或 Safari 中无法运行。检查页面时，我没有收到任何 chrome 错误。

我从 FF 和 Chrome 中获得的原始代码，但由于我已经分叉了它，因此该代码在 Chrome 中不再起作用。

原始代码： Scrolling to the next element

jsFiddle 原文：http://jsfiddle.net/Pm3cj/3/

我的 Jsfiddle：https://jsfiddle.net/hjb6631d/1/

HTML：

<div style="height: 5000px">

<section class="cover" style="height: 100px; border: 1px solid black; margin-bottom: 10px;">
    <section class="controls">
        <p class="prev">prev</p>
        <p class="next">next</p>
        1
    </section>      
</section>

<section class="cover" style="height: 100px; border: 1px solid black; margin-bottom: 10px;">
    <section class="controls">
        <p class="prev">prev</p>
        <p class="next">next</p>
        2
    </section>      
</section>

<section class="cover" style="height: 100px; border: 1px solid black; margin-bottom: 10px;">
    <section class="controls">
        <p class="prev">prev</p>
        <p class="next">next</p>
        3
    </section>      
</section>

</div>

脚本：

    $('.cover:first').addClass('first-child');
    $('.cover:last').addClass('last-child');
    $(".next, .prev").on("click", function(e) {

    // the container that will be scrolled to
    var target = '.cover';
    container = $(this).parent();

    // am I the last .container in my group?
    while (document != container[0] && container.find('~'+target, '~:has('+target+')').length == 0)
        container = container.parent(); // if so, search siblings of parent instead

    prevdiv = container.prevAll(target, ':has('+target+')').first();
    nextdiv = container.nextAll(target, ':has('+target+')').first();

    // if clicked next object
    if ( $(this).hasClass('next') ) {
        // no next .container found, go back to first container
        if (nextdiv.length==0) nextdiv = $(document).find(target+':first');

        //$(document).scrollTop(nextdiv.offset().top);
        $('html').animate({scrollTop:nextdiv.offset().top},300);        
    }

    // if clicked prev
    if ( $(this).hasClass('prev') ) {
        // no next .container found, go back to first container

        // scroll to previous element
        prevdiv = $(this).parents(target).prev(target);

        // if is first element on page, then scroll to last element
        if ( $(this).parents(target).hasClass('first-child') ) {
            prevdiv =  $(document).find(target+':last');
        };      

        //$(document).scrollTop(nextdiv.offset().top);
        $('html').animate({scrollTop:prevdiv.offset().top},300);        
    }

    // $(this).parent().next() // this is the next div container.
    return false;
});

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

问题是，在 Chrome 中（出于某种原因）无法使用

滚动

$('html').animate({scrollTop:....

你必须使用

$('body').animate({scrollTop:....

另一方面，在 Firefox 和 IE 中，情况正好相反。所以我建议你使用

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

使其适用于所有浏览器

编辑：您的参考和您的代码之间的区别在于，在参考中，使用了 jQuery 函数 $(document).scrollTop，这使您摆脱了兼容性部分，而 animate({scrollTop}) 不能

【讨论】：

完美，非常感谢！我知道这个问题很小 - 它总是如此。

【解决方案2】：

问题在于动画功能。在选择器中添加“body”：

$('html, body').animate({scrollTop:nextdiv.offset().top},300);

和： $('html, body').animate({scrollTop:prevdiv.offset().top},300);

在 Chrome 中测试。参考：http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

【讨论】：