2013-01-02 4 views
1

내 처지가 있습니다. 나는 다른 일에 가서 각각의 DIV ID로 방문자를 한 페이지에서 세 개의 링크가 있습니다 : 그것은 잘 작동하고URL에서 해시 태그를 제거했지만 여전히 요소로 이동합니다.

www.mysite.com/#about 
www.mysite.com/#gallery 
www.mysite.com/#help 

,하지만 난 정말 URL에서 후행 해시 태그를 제거해야하거나이 놨어요 jquery 갤러리 슬라이더. 이것이 가능한가? 비슷한 질문을 한 다른 사람들을 보았지만 새로운 페이지로 이동하지는 않습니다.

는 내가 찾던 방문자가 링크 (예를 들어, www.mysite.com/#about)를 클릭하고 해당 페이지 (그리고 각각의 요소)로 이동하지만, 브라우저가 #about을 잘라 그냥 www.mysite.com을보고있는 방법입니다.

Jquery, PHP, javascript, 나는 정말로 상관하지 않습니다.

다른 대안은 www.mysite.com으로 이동 한 다음 해시 태그를 적용하는 것입니다. 가능한가요? 그냥 요소로 이동하지만 브라우저의 URL에 해시 태그가 반영되지 않습니다.

추신 : 저는 코더가 아닙니다. 이렇게 할 수있는 약간의 코드가 있다면 구현 방법에 대해 분명히 알 수 있습니까?

감사합니다.

http://demos.flesler.com/jquery/scrollTo/

+0

해시 태그가 아닌 "프래그먼트 식별자"라고합니다. 문서의 일부를 나타냅니다. –

답변

0

이 jQuery를에 좋은 솔루션입니다.

먼저 스택에 상태가 있는지 확인합니다. 국가가 무엇이든 가장 최근의 항목이 스택에 삽입됩니다.

요소의 idhash과 같다고 가정합니다. 우리는 이것을 div의 선택자로 사용하고 해당 div는 offset().top입니다.

if(history.state){ 
    $('html, body').scrollTop($('div[id='+history.state.element+']').offset().top); 
} 

이제 클릭 기능을 살펴 보겠습니다. 우리는 기본 동작을 방지하고 href를 변수에 저장합니다 (몇 번 사용하기 때문에). 우리는 한 상태를 스택으로 밀어 넣습니다. element 키의 값은 whatever comes after the hash tag입니다. 스택 상태에 대한 다른 정보도 제공합니다. 끝나면 페이지 위치를 요소의 위치 인 without 해시 태그로 리디렉션합니다.

$('a').on('click', function(e){ 
    e.preventDefault(); 

    var ele = $(this).prop('href'); 
    window.history.pushState({'element' : ele.split('#')[1]}, ele, ele.split('#')[0]); 

    window.location = ele.split('#')[0]; 
}); 

이제 다음 페이지가로드 될 때 내역 wlil은 가장 최근에 푸시 된 스택이 될 상태가됩니다. 이것은 당신이 원하는 행동을 모방 할 것입니다.

+0

게시물을 보내 주셔서 감사합니다.하지만 그게 내가하려는 일이 아닙니다. 페이지의 아무 곳으로나 스크롤 할 필요가 없습니다 (이미 그렇게하고 있습니다). 방문자에게 새 페이지를 보낼 때 URL에 해시 태그가 포함되지 않도록해야합니다. –

1

우리는 history api를 사용할 수 있습니다

+0

도움을 주셔서 감사합니다.하지만 불행히도 작동하지 않았습니다. 오류가없고 아무것도 없습니다. 브라우저는 정상적인 동작에 따라 조각 ID에 계속 남아 있습니다. –