페이지 스크롤 크로스 브라우저

나는 페이지 내에서 자바 스크립트 "점프 메뉴"를 만들 필요가있는 작업을 위해 프로젝트 작업을 해왔다.페이지 스크롤 크로스 브라우저

(Q는 : 잠깐, 그냥 a 요소와 네임 스페이스를 사용하지 않는 이유는 점프 메뉴는 페이지 내에서 이동합니다

을 :?! 그 그래서 목적을 물리 칠 것 때문에하십시오 . 나는 자바 스크립트와 함께이 작업을 수행 할 필요가 그런 식으로 답변을 제공하지 않습니다 (AND I는 jQuery를 사용하지 않는!))

그래서, 여기에 내가 할 것입니다 :

내가 목록에서을 페이지 상단 및 페이지 하단의 목록

페이지 상단의 각 목록 항목에 이벤트 수신기를 추가하고 해당 목록 항목에 해당하는 페이지 내의 해당 콘텐츠 항목에 대한 참조를 첨부합니다.

상단의 링크를 클릭하면 스크롤하려는 항목의 offsetTop을 가져오고 document.body.scrollTop 또는 window.pageYOffset 중 하나를 설정합니다.

나는 실질적으로 window.pageYOffset을 필요로하지는 않았지만 어딘가에서 작동 할 것이라고 말했고 결코 제 코드에서 제거하지 않았습니다. 어느 쪽이든, 이것은 Chrome, Safari 및 Opera의 document.body.scrollTop에서 작동하는 것으로 보이지만 Firefox 또는 IE에서는 작동하지 않습니다. 왜? 여기

내가 document.body.scrollTop 설정 코드 블록이다. "네, 오른쪽 요소를 잡아하고있다"

if(elem.jump_ref) 
{ 
    if(document.body.scrollTop || document.body.scrollTop === 0) 
    { 
     document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding; 
    } 
    else if(window.pageYOffset || window.pageYOffset === 0) 
    { 
     window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding; 
    } 
}

And Heres The Project In JSFIDDLE

내가 통해 강화했습니다 및 발견 "예, 저는 document.body.scrollTop을 설정하고 있습니다."아니오, document.body.scrollTop을 0으로 설정하지 않았습니다. "그래도 여전히 작동하지 않습니다! 제발 도와주세요! 내 웹 페이지는 화요일에 공개 될 예정입니다!

출처

2014-11-26 WebWanderer

도움을 청하는 동안 너무 짭짤하지 않아야합니다 ... –

게시물이 중복되었습니다 ... http://stackoverflow.com/questions/7435843/window-top-document-body-scrolltop-not-working -in-chrome-or-firefox –

무엇? @PedroMoreira 어쩌면 당신은 텍스트를 통해 내 기분을 잘못 해석했을지 모르지만, 나는 어떻게 내가 "짠"것인지 잘 모르겠다. 죄송합니다 ... – WebWanderer

지금까지 크롬, 파이어 폭스, IE, 오페라, 사파리 (내가 테스트 할 수 있었던 유일한 것들)에서 작동하는 것으로 나타났습니다. 어떤 유형의 모바일 이 기능은 (있는 경우)해야합니다 지원하지만, 내 페이지가 이미 어쨌든 모바일 완전히 다른 기능이 있습니다.

어느 쪽이든을, 여기에 수정합니다. 그것 window.scrollTo 방법! :

this.jump = function(evt) 
{ 
    var elem = evt.srcElement || evt.currentTarget; 
    var page_top_padding = 100; 

    if(elem.jump_ref) 
    { 
     window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding)); 
    } 
}.bind(this);

그리고 내가 말했듯이, 거의 모든면에서 훌륭하게 작동합니다! JSFiddle을 제외한 모든 것. 롤. 나는 그것을 얻지 못했지만 운좋게도 아무도 JSFiddle에서 내 웹 페이지를 방문하지 않을 것입니다.

출처

2014-11-26 20:54:07 WebWanderer

페이지 스크롤 크로스 브라우저

답변

관련 문제