scrollTo는 첫 번째 링크에서만 작동합니다.

Question

사용자가 링크를 클릭하면 해당 앵커로 스크롤해야하는 코드 줄이 있습니다.

첫 번째 링크에서만 작동합니다. 다른 사람은 코드

jQuery를

$(document).on('click','#scrollTo',function(){ 

       var to = $(this).attr('class'); 
       //alert(to); 
       //This allways print the correct class name 

       $(window).scrollTo('div #'+to,'1000'); 


      }); 

PHP

<ul id="source"> 
      <?php 
      $sourceRCS = $source->getAllSources(); 
      foreach($sourceRCS as $src) 
      { 
       echo '<li data-value="'.$src->name.'"><a href="#" id="scrollTo" class="'.$src->name.'">'.$src->name.'</a></li></a>'; 
      } 

      ?> 
    </ul> 
foreach($sourceRCS as $src) 
{ 


     echo ' 
    <div class="custom-label-src"> 
     <div id="'.$src->name.'" class="span12 label-title-src"> 
      '.$src->name.' 
     </div> 
    </div>'; 

} 

내가 잘못하고있는 중이 야 무슨이 예외 여기

Uncaught TypeError: Cannot read property 'slice' of undefined 

를 해고?

은 사전에 감사

Answer 1

ID의이 독특한 있어야하지만 #scrollTo를 반복하고 있습니다. 대신 CSS 클래스를 대상으로 사용해보십시오.

Answer 2

var to = $(this).attr('class'); 
$(window).scrollTo('div #'+to,'1000'); 

클래스를 선택하고 "to"에 지정하고 있습니다. 그런 다음 클래스를 가져 와서 다음 줄의 ID로 변환합니다.

당신의 선택은 다음과 같이해야합니다 :

var to = $(this).attr('class'); 
$(window).scrollTo('div .' + to,'1000'); 

Answer 3

html로 아이디의 고유해야합니다. 이전에 제안한 것과 마찬가지로 클래스를 대신 사용해보십시오. 또한, 이벤트 대상을 포착하고 그것을 스크롤 시도 :

$(document).click(function(evt){ 
    var target = evt.target; 
    $(window).scrollTo(target, 1000); 
}); 

그러나, 이것은 사용자가 클릭하는 모든 것을 스크롤됩니다. 더 나은 해결 방법은 스크롤 할 앵커 태그에만 클릭 이벤트 핸들러를 설정하는 것입니다.

$("#source a").click(function(evt){ 
    evt.preventDefault(); 
    var target = $(evt.currentTarget); 
    $(window).scrollTo(target, 1000); 
    // More code here... 
});