스팬 요소로 자동 스크롤

Question

기사가 포함 된 요소가 있습니다 (놀랍습니다!).

기사 상단에 페이지 상단에 태그 목록이 있습니다. 사용자가 태그를 클릭하면 기사에서 일치하는 단어가 강조 표시됩니다.

내가 문제가되는 것은 강조 표시된 단어로 자동 스크롤됩니다.

javascript/jQuery에서이를 수행 할 수있는 방법이 있습니까?

$(".article-tags a.toggle").live("click", function() { 
     var $this = $(this); 
     var $p = $this.closest("p"); 
     if ($p.find("span.highlight").length == 0) { 
      $("#viewer .article-body").highlight($this.text()); 
      $this.highlight($this.text()); 
      document.getElementById("viewer").scrollTop = $p.find("span.highlight").offsetTop; 
     } 
     else { 
      $("#viewer .article-body").removeHighlight(); 
      $p.removeHighlight(); 
     } 
     return false; 
    }); 

감사 :

다음은 단어를 찾아 강조 표시하려면 코드입니다.

Answer 1

여러 가지 방법으로이를 수행 할 수 있습니다.

• jQuerys은 scrollTop와 .animate()는 elements.offset().top
• element.scrollIntoView();

.scrollIntoView() 당신이 직접 DOM 노드에서 호출 할 수있는 기본 방법입니다

$(window).scrollTop(element.offset().top);로 설정합니다.

Answer 2

$('span.highlight').first().prepend('<a class="highlighted" name="hightlighted" />'); 
window.location.hash = '#highlighted'; 

그렇게해야합니다. 요소 바로 앞에 앵커를 추가하고 스크롤합니다. 이전에 추가 한 내용을 지우려면이 전에 $('a.highlighted').remove()을 입력하십시오.