jQuery的.animate（{scrollTop的：...}）工作不

我有一个.html文件jQuery的.animate（{scrollTop的：...}）工作不

我有<ul>菜单和<li>的具有数据-ID属性。我有几个内容项，它们与菜单<li>的data-id的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/

来源

2013-07-05 mLeht

你可以提供一个http://jsfiddle.net –

看一看http://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrolltop-with- jQuery的。可以帮助你。 – putvande

@putvande这是什么已经使用OP，或者我错过了什么？！ –

您应该使用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); 
      } 
     } 
    }); 
});

来源

2013-07-05 10:44:53

没有诀窍：/ – mLeht

你说过这是第一次工作。之后没有任何反应。所以我已经添加了每个（）函数，它将为列表中的每个li起作用。 –

是的，我明白，每个（）都做了什么，但是看看你自己：http://jsfiddle.net/wBUS7/3/ 它不工作。使结果窗口宽度小于700px，然后单击运行。之后，只有点击'FIRST'才能运行并且只能运行一次。 – mLeht

jQuery的.animate（{scrollTop的：...}）工作不

回答

相关问题