전체 브라우저가 아래로 뛰어 오르지 않고 스크롤 가능한 div에 앵커 태그를 이동하는 방법?

Question

저는 클라이언트를위한 더 큰 프로젝트의 일환으로 간단한 용어 위젯을 만들고 있습니다. 용어집의 내용은 스크롤 할 수있는 div 안에 들어 있습니다 (오버플로 : 자동). 각 문자에는 앵커 태그가 있습니다 (#a, #b, #c 등). 스크롤 가능한 div 위에는 알파벳의 모든 문자가 들어있는 div가 있습니다. 이 문자 중 하나를 클릭하면 사용자가 스크롤 가능한 div의 해당 문자의 정의로 이동합니다. 이 방법은 효과가 있지만 의도하지 않은 부작용은 창 전체가 앵커로 점프되어 사용자에게 혼란스럽고 귀찮은 것입니다.

여기는 위젯을 조금 벗기고 <br />의 무리와 함께 내가 무슨 뜻인지 알게 해줍니다.

http://www.nitrohandsome.com/clients/topics/glossary-widget/

내가 어떤 인터넷 검색에서 함께 자갈길 몇 가지 자바 스크립트 아이디어를 시도했다, 그러나 아무것도 작동하지 않았다, 그래서 난 그냥 코드를 고정하기 위해 실제 이동을 제외한 모든 것을 제거되었다 (나는 꽤 큰 해요 JS 뉴비).

function jumpToAnchor(myAnchor) { 
    window.location = String(window.location).replace(/\#.*$/, "") + myAnchor; 
    } 

내가이 해낼 수있는 방법 때문에 전체 윈도우가 링크를 클릭 할 때마다 이동하지 않습니다 그래서 바로 지금, 문자의 클릭하면 전달 된 앵커 태그로,이 자바 스크립트 함수를 실행 ?

미리 감사드립니다.

Answer 1

jQuery를 사용하는 경우 scrollTo 플러그인을 사용해 볼 수 있습니다. 또한, 단지 해시 일부 또는 URL을 편집하려면, 당신은 그냥 IE8, FF 3.5 및 Windows의 Safari 4에 예를 테스트

function jumpToAnchor(myAnchor) { 
    window.location.hash = myAnchor; 
} 

Answer 2

Div 대신 IFrame을 사용하거나 ScrollBy를 사용하여 특정 기능을 만드십시오.