별도의 페이지에서 특정 앵커 태그로 이동/스크롤 및 오프셋

Question

jQuery scrollTo를 사용하여 여러 섹션을 탐색하는 다중 섹션 스플래시 페이지를 작성합니다. scrollTo의 '오프셋'설정이 고려되는 고정 헤더가 있지만 사용자가 사이트의 다른 페이지에서 특정 섹션 (스플래시 페이지의 앵커)을 탐색 할 수 있기를 바랍니다.

오프셋이 적용될 때 고려되지 않았습니다 ... 섹션과 #page 및 body 요소 모두에서 여백을 추가하고 여기 저기에 상대적 위치 지정을 시도했지만 섹션은 항상 브라우저 창의 상단에 맞춰집니다.

내가 좋아할만한 점은 다른 페이지의 링크를 사용하여 오프셋을 사용하거나 해당 링크를 사용자가 스플래시 페이지 상단으로 이동시킨 다음 원하는 앵커로 스크롤하는 것입니다.

JS :

는

//menu scrolling 

    jQuery('#menu-primary').localScroll({ 
     easing: 'easeInOutQuint', 
     duration: 1200, 
     offset: -63, 
     hash: true 
    }); // end scroll 


    // active states for menu items 
    $(function(){ 
     var sections = {}, 
      _height = $(window).height(), 
      i  = 0; 

     $('.section').each(function(){ 
      sections[this.name] = $(this).offset().top; 
     }); 

     $(document).scroll(function(){ 
      var $this = $(this), 
       pos = $this.scrollTop(); 

      for(i in sections){ 
       if(sections[i] > pos && sections[i] < pos + _height){ 
        $('li').removeClass('active'); 
        $('.nav-' + i).addClass('active'); 
       } 
      } 
     }); 
    }); 

HTML :

는

<div class="menu-primary-container"> 
    <ul id="menu-primary" class="menu"> 
     <li id="menu-item-21" class="nav-section1 active"><a href="/#section1">Home</a></li> 
     <li id="menu-item-13" class="nav-section2"><a href="/#section2">two</a></li> 
     <li id="menu-item-12" class="nav-section3"><a href="/#section3">three</a></li> 
     <li id="menu-item-14" class="nav-section4"><a href="/#section4">four</a></li> 
     <li id="menu-item-19"><a href="http://galvanizingequity.com/?page_id=17">other page</a></li> 
    </ul> 
</div> 

    <div id="scrollwrap"> 
    <div class="scrollbox one"> 
     <a name="section1" class="section"></a> 
     <h2>Apples</h2> 
    </div> 
    <div class="scrollbox two"> 
     <a name="section2" class="section"></a> 
     <h2>Bananas</h2> 
    </div> 
    <div class="scrollbox three"> 
     <a name="section3" class="section"></a> 
     <h2>Toast</h2> 
    </div> 
    <div class="scrollbox four"> 
     <a name="section4" class="section"></a> 
     <h2>Papaya</h2> 
    </div> 
    </div><!--scrollwrap--> 

(. 그것은 메뉴를 사용자 정의 코딩으로까지 추가 장애물을 추가 수행하는 워드 프레스 사이트)

입력이 감사합니다 . 감사!

Answer 1

당신은 설정하여 jQuery를 준비 페이지가로드/당신이 scrollTop(0)에 둘 때, 다음 사용하여 자바 스크립트에 해시를 얻을 수 있도록 수 : window.location.hash를 단순히 animate({scrollTop,$('a.'+hashvaluehere).offset().top},1000); 그건 당신이 요구되었지만 내가 생각하는 거라면

확실하지 않음 나는 그 질문을 이해했다?