javascript - jQuery .animate({scrollTop: ... }) 不工作

Question

我有一个 .html 文件

我有<ul>menu 和<li>'s 有 data-id 属性。我有几个内容项，它们的 id 与 menu<li>的相同data-id。默认情况下，大多数内容项是display:none;首页内容display:block;

<ul>
    <li class="menuLink" id="onepage" data-id="one"></li>
    <li class="menuLink" id="twopage" data-id="two"></li>
    <li class="menuLink" id="threepage" data-id="three"></li>
    <li class="menuLink" id="fourpage" data-id="four"></li>
</ul>
<div class="content">
    <div id="one" class="page">...</div>
    <div id="two" class="page">...</div>
    <div id="three" class="page">...</div>
    <div id="four" class="page">...</div>
</div>

该脚本应通过单击菜单项来显示和消失内容项。这很好用。

$('li.menuLink').click(function () {
    var elem = $(this);
    if (elem.hasClass('active')) {
    } else {
        $('li.active').removeClass('active');
        elem.addClass('active');
        $('#' + elem.attr('data-id')).prependTo($('.content'));
        var existing = $('.page:visible');
        (existing) ? existing.fadeOut(1) : '';
        $('#' + elem.attr('data-id')).delay(10).fadeIn(400);

        if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }
    }
});

如果.body-wrapper宽度小于 700（移动设备），此脚本也应该向下滚动到内容，但此功能根本不起作用。刷新页面并单击 FIRST 菜单元素后，它会运行一次。之后……什么都没有。

if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }

编辑：http: //jsfiddle.net/wBUS7/2/

Answer 1

你应该使用each()函数。喜欢

$('li.menuLink').each(function(){
    $(this).click(function () {
        var elem = $(this);
        if (elem.hasClass('active')) {
        } else {
            $('li.active').removeClass('active');
            elem.addClass('active');
            $('#' + elem.attr('data-id')).prependTo($('.content'));
            var existing = $('.page:visible');
            (existing) ? existing.fadeOut(1) : '';
            $('#' + elem.attr('data-id')).fadeIn(400);

            if (($('.body-wrapper').width()) <= 700) {
                $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
            }
        }
    });
});