jQuery를 LocalScroll + hashchange 이벤트 브라우저 호환성 문제

Question

나는 두 가지를 할 내가 원하는 Ariel Fleslers jQuery LocalScroll plugin을 사용하고 사이트 짓고 있어요 : 링크가
을 클릭하면

1) 앵커로 스크롤 애니메이션을 2) 브라우저의 뒤로 버튼을 누르면 이전에 방문한 앵커로 스크롤합니다.

내용이 넘치는 컨테이너 내부에서 스크롤이 발생합니다.

1 번으로 충분합니다. 숫자 2를 얻기 위해서 나는 비슷한 검색을하는 사람들이 몇 군데 게시물을 보았음에도 불구하고 인터넷 검색을 수행했지만 실제로 해결책을 찾지 못했습니다. 내가 (웃기려는 의도 없음) 경우 해킹의 다소 해요 비록

$(document).ready(function(){ 
    $.localScroll({ 
     hash:true, 
     target:'#container', 
     duration:500 
     }); 

$(window).hashchange(function(){ 
    var hash = location.hash; 

    if (hash === ''){ 
    location.hash = '#main'; 
    } 

    $.localScroll.hash({ 
    reset:false, 
    hash:true, 
    target:'#container', 
    duration:500 
    }); 
    }); 
    $(window).hashchange(); 
    }); 

위의 코드 :

내가 원하는 결과를 acheive하는 LocalScroll과 함께 Ben Almans jQuery hashchange event plugin를 사용하여 결국은 코드는 다음과 같습니다 그것은 코딩, 파이어 폭스, 익스플로러, 오페라에서 내가 원하는 것을 수행한다. 그러나 Chrome과 Safari에서 다른 문제가 발생합니다.

크롬에서는 기본적으로 링크를 클릭하면 애니메이션이 적용되지만 브라우저의 뒤로 버튼을 누르면 전환에 애니메이션을 적용하지 않고 앵커로 바로 이동합니다. 좀 더 면밀히 살펴보면 뒤로 버튼을 한 번 움직이게하는 것처럼 보이지만 시간이 왜 그렇게되는지에 대해 머리를 터지게 할 수는 없습니다.

Safari에서는 링크를 클릭했는지 또는 뒤로 버튼을 사용하든 상관없이 애니메이션으로 이동하지 않고 앵커로 점프합니다.

$(document).ready(function() { 



$.localScroll({ 
hash:true, 
target:'#container', 
duration:500 
}); 
}); 

이

사람이 크롬과 사파리에서 이러한 문제의 원인이 무엇인지에 어떤 아이디어가 있습니까 : 코드는 다음과 같이 보았을 때 나는의 hashchange 이벤트 솔루션을 구현하기 전에

애니메이션은 사파리에서 근무? 제가 말했듯이, 저는 코더가 아닌 디자이너입니다. 그리고 이것은 제 능력을 실제로 확장시키고 있기 때문에, 제가 가지고있는 문제와는 상관없이 위의 코드에서 실수를 지적 할 수 있습니다. 아닙니다.

또한 위대한 플러그인에 대한 Ariel과 Ben 덕분입니다. 편집 : 확인을 클릭하면 로컬에서 실행되는 테스트 서버에 사이트를 업로드 할 때 Safari에서 링크 클릭 스크롤이 스크롤됩니다 (실행시 정확히 동일한 코드가 작동하지 않더라도). 그것은 오프 서버. 어쨌든, 뒤로 버튼을 눌렀을 때 Safari 나 Chrome이 애니메이션을 트리거하지 않아 문제가 남아 있습니다.

Answer 1

나는이 두 플러그인에 심각한 문제가있었습니다. 사용하기 힘들고 기능이 부족하며 버그가 있습니다.

대신이 조합을보십시오 :

• https://github.com/browserstate/history.js
• https://github.com/balupton/jquery-scrollto
• https://github.com/browserstate/ajaxify

그것은 당신이 방법 부드러운 스크롤을 처리하는 것, 모든 브라우저에서 HTML5 역사 API 및 활동을 지원 .