정적 페이지에서 웨이 포인트에 연결

Question

나는 시차 사이트에 여러 슬라이드가 있지만 하나의 정적 페이지에 대한 링크가 있습니다. 정적 페이지에서 특정 슬라이드로 다시 링크하고 스크롤 효과를 유지하려면 어떻게해야합니까?

나는 내 시차 스크립트로 Stellar.js를 사용하고 있습니다.

시차 페이지 내 탐색 :

<nav class="navigation"> 
<ul> 
    <li data-slide="1" > 
    <div class="item"><a href="#">Slide 1</a></div> 
    </li> 
    <li data-slide="2"> 
    <div class="item"><a href="#">Slide 2</a></div> 
    </li> 
    <li > 
    <div class="item"><a href="test.html">Slide 3</a></div> 
    </li> 
    <li data-slide="4"> 
    <div class="item"><a href="#">Slide 4</a></div> 
    </li> 
</ul> 

및 각 슬라이드는 다음과 같습니다

<div class="slide" id="slide4" data-slide="4"> content </div> 

난 그냥 슬라이드 위에 지정된 앵커를 넣어 시도 :

<a id="section4"></a> 
<div class="slide" id="slide4" data-slide="4"> content </div> 

, 그러나 그것은 단지 그 섹션으로 점프하고, 그 섹션까지 좋은 스크롤을하지 않습니다.

내 정적 페이지에서 스크롤 효과를 사용하여 해당 섹션으로 이동하려면 어떻게해야합니까?

Answer 1

쿼리 스트링 방식을 사용해 보겠습니다.

별의와 페이지에서

, 당신은 (here에서 스크립트)를 jQuery의 $(document).ready()script 태그 안에 있지만 외부 곳이 기능을 추가합니다 :

function getParameterByName(name){ 
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
    var regexS = "[\\?&]" + name + "=([^&#]*)"; 
    var regex = new RegExp(regexS); 
    var results = regex.exec(window.location.search); 
    if(results == null) 
     return ""; 
    else 
     return decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

그리고 당신의 $(document).ready()이 스크립트에 모든 후 경우 (더 나은), 특별히 별 :

var slideToGo = getParameterByName('slide'); 
slideToGo = parseInt(slideToGo); //try make it a number 
if($.type(slideToGo) == 'number'){ //make sure is a number 
    var delay = setTimeout(function(){ 
     $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click(); 
    },500); 
} 

그래서 시차 페이지에 액세스 할 때마다,이 스크립트는 URL의 쿼리 문자열에 ?slide= 찾습니다. 발견하면 (문자열이며 비어 있음) data-slide의 숫자와 일치하는 LI를 찾으십시오. ?slide=의 앵커를 클릭하십시오.

나는 이것이 효과가있을 것이라고 생각합니다. 별의 렌더링에 약간의 시간을주기 위해 약간의 setTimeout을 추가했습니다. 그 문서에 onComplete 이벤트 나 비슷한 것이 있으면 찾지 못했습니다. 많이 좋아 졌 겠지만 이후로는 그렇게하지 않으려 고합니다.

물론 정적 페이지에서 링크는 pagewithstellar.html?slide=NN입니다. 여기서 NN은 돌아갈 데이터 슬라이드의 번호입니다.

업데이트 :

당신이 정말로 해시 사용하려는 경우 (예 : parallaxpage.html # 슬라이드-4), 당신이 (다음, 아래 사람들과 위의 코드를 교환) 다음이 필요합니다

function getSlideNumberInHash() { 
    var hash = document.URL.substr(document.URL.indexOf('#')); //returns #slide-N 
    var slideNumber = hash.substr(hash.indexOf('-')+1); //returns -N. The +1 will make it return N 
    return slideNumber; 
} 

var slideToGo = getSlideNumberInHash(); 
slideToGo = parseInt(slideToGo); //try make it a number 
if($.type(slideToGo) == 'number'){ //make sure is a number 
    var delay = setTimeout(function(){ 
     $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click(); 
    },500); 
} 

나는 document.URL.substr 대신 때문에 this comment의 window.location.hash 사용. iframe을 사용하지는 않지만 언젠가는 필요할 경우 더 잘 예방할 수 있습니다. P)