Question

我的网站上有一个垂直导航点击功能，可以在Firefox和IE10以及IE9中正常工作，但在Chrome或Safari中无效。检查页面时，我没有收到任何铬错误。

我从FF和Chrome开始使用的原始代码，但是因为我已经分叉了，所以代码在Chrome中不再起作用。

我的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;
});

Answer 1

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

进行滚动

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

相反，你必须使用

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

另一方面，在Firefox和IE中，它恰恰相反。所以我建议你使用

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

使其适用于所有浏览器

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

Answer 2

问题在于animate功能。将“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

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

2 个答案: