앵커 온 클릭 (Anchor Onclick) 디비전 하이라이트

Question

나는 많은 부서가있는 간단한 웹 페이지를 만들었습니다. 그래서 다음과 같이 상단에 앵커를 뒀다 부서로 직접 이동합니다 :

<a href="#first">First</a><br/> 
<a href="#second">Second</a><br/> 
<a href="#third">Third</a> 

그리고 부드러운 스크롤을 위해 나는 자바 스크립트 사용하고 있습니다 :

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
    return false; 
}); 

지금 내가 선택한 부문에 효과를 추가 할을 . 따라서 사용자가 앵커를 클릭하면 페이지가 원활하게 분할로 스크롤되고 선택한 분할이 1 초 동안 강조 표시됩니다. 스택 오버플로받은 편지함에서 뉴스를 얻은 경우처럼 클릭합니다. 짧은 시간 동안 페이지 lodes와 뉴스 항목이 강조 표시됩니다.

내 페이지에 그 일을하고 싶습니다. 왜냐하면 저는 18 개 이상의 부서를 가지고 있고 모두 같습니다. 그래서 선택한 부서를 구별하는 것이 필요합니다. 어떤 도움을 주시면 감사하겠습니다 Fiddle For the Code

: 여기

는 예를 들어 바이올린입니다. 미리 감사드립니다. 예를 들어 같은

Answer 1

('HTML, 몸') 2 개 요소를 반환합니다. 당신은 당신이 작업을 수행 할 수있을 것입니다 jquery.ui 포함하는 경우 :

$('a').click(function(){ 
    var selector = $(this).attr('href');   
    $('html').animate({ 
     scrollTop: $(selector).offset().top 
    }, 500,'',function(){ 
     $(selector).effect("highlight", {}, 1000);        
    }); 
    return false; 
}); 

JsFiddle

Answer 2

이 사용 불투명도 : 애니메이션 두 번 발사 있도록 귀하의 코드 $에서

$('a').click(function(){ 
    var el = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500, function(){ 
     $(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)}); 
    }); 
    return false; 
});