Javascript 动画（{scrollTop:…}）不工作

我有一个.html文件

我有

菜单和

有数据id属性。我有几个内容项，它们的id与菜单的数据id相同。默认情况下，大多数内容项为

display:none首页内容为
显示：块

<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>

编辑：
您应该使用
each（）
函数。
像

$（'li.menuLink'）。每个（函数（）{
$（此）。单击（函数（）{
var elem=$（本）；
if（elem.hasClass（'active'））{
}否则{
$（'li.active'）.removeClass（'active'）；
元素addClass（“活动”）；
$（'#'+elem.attr（'data-id'））.prependTo（$（'.content'））；
var existing=$（'.page:visible'）；
（现有）？现有淡出（1）：“”；
$（“#”+elem.attr（'data-id'））.fadeIn（400）；
如果（$（'.body wrapper'）.width（））你能提供一个看一看。可能对你有帮助。@putvande这是已经使用OP的东西，或者我遗漏了什么？！
$（'.body wrapper'）.width（）是否返回预期结果？是的，
$（'.body wrapper'）.width（）
正在工作您说它是第一次工作。之后什么也没有发生。所以我添加了每个（）函数，它将对列表中的每个li工作。是的，我理解，什么是
每个（）
可以，但你自己看：它不起作用。将结果窗口宽度设置为小于700px，然后单击“运行”。之后，只需单击“第一个”即可，并且只需单击一次。找到解决方案。只需从第$（“#”+elem.attr（'data-id'）行中删除delay（10）。delay（10）。fadeIn（400）；
$('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);
        }
    }
});

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

$('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);
            }
        }
    });
});