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的：...}）工作不

回答

相關問題