링크를 클릭 한 후 아래로 슬라이드하는 방법?

Question

이것은 내가 작업하고있는 웹 페이지입니다.

http://www.solved.com 내가 원하는 것은 "상태"를 클릭했을 때입니다. 예 : CA 페이지를 아래로 내리고 결과를 표시하고 싶습니다. 이제 결과가 나타나지만 아래로 내려 가지 않습니다.

Answer 1

변경 상태가

<a href="#can_map" id="AK">AK</a> 
<a href="#can_map" id="AL">AL</a> 

에

<a href="#" id="AK">AK</a> 
<a href="#" id="AL">AL</a> 

를 연결하고) 조사 this may be a good script처럼 보이는 당신은 즉시 마음에 들지 않는 경우 scroll https://github.com/kswedberg/jquery-smooth-scroll 또는 다른 부드러운 스크롤 플러그인을 한눈에 볼 수 있습니다.

Answer 2

사용 a name (또는 id)와 해시 태그 (이름 http://www.w3schools.com/tags/att_a_name.asp 참조) 예를 들어

는 캘리포니아의 링크가

<a href="#california">(image)</a> 

수 있고 부분은

<a name="california">California</a> 

이 (또는 바람직하게는)

<a id="california">California</a> 

(편집 : 브라우저 기능 만 사용하면 쉽게 할 수 있습니다. 당신이 부드러운 슬라이드 jQuery를 사용하려는 경우,

Answer 3

또한 지금처럼에 부드러운 스크롤의 좋은 효과를 추가 할 수 있습니다

이

<a href="#can_map" class="anchor_class">Click me</a> 

그런 jQuery로하면 클릭 이벤트 처리기에 다음을 추가 할 수 있습니다 :

이 링크에 클래스 추가

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