2012-08-05 3 views
6

내 홈페이지의 맨 아래에서 연락처 양식을 포함하고이 섹션의 앵커를 div id = "contact"로 지정했습니다.다른 페이지로 연결 -> jquery 특정 앵커로 스크롤

임의의 페이지에서 연락처 버튼을 클릭하면 홈페이지로 이동해야하며 페이지로드시 자동으로 연락처 양식으로 스크롤해야합니다.

내가 여기에서 발견 한 비슷한 질문을 검토 한 결과 작동하지 못했습니다. jQuery scroll to ID from different page 시도하면 양식으로 바로 이동합니다. 부드럽게 스크롤하고 싶습니다.

(function($){ 
    var jump=function(e) { 
     if (e) { 
      e.preventDefault(); 
      var target = $(this).attr("href"); 
     } else { 
      var target = location.hash; 
     } 

     $('html,body').animate({ 
      scrollTop: $(target).offset().top 
     },1000,function() { 
      location.hash = target; 
     }); 
    } 

    $('html, body').hide() 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

    if (location.hash) { 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show() 
      jump() 
     }, 0); 
    } else { 
     $('html, body').show() 
    } 
}); 

나는이 예제와 비슷한 달성하기 위해 노력하고있어 : http://vostrel.cz/so/9652944/page.html 차이가 대신한다는 것을

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li> 

문제의 JQuery와 기능은 다른 페이지에서 홈 페이지에 나와있는 연락처 앵커로 이동합니다 이 경우 두 페이지에 나타나는 "앵커 ID"는 나를위한 앵커 ID (연락처)가 한 페이지 (집)에만 나타납니다.

답변

0

코드가 무엇인지 확실하지 않지만 작동 시키도록했습니다. 한 가지는 게시 한 코드이며, 끝에 })(jQuery)이 누락되었습니다. 어쨌든, 내가 무엇을했는지 체크하십시오 here, 나는 그것이 당신이 찾고있는 것이라고 생각합니다. 나는 당신의 웹 사이트의 HTML이 어떻게 생겼는지 모르겠다. 그러나 나는 당신이 그것을 적응시킬 수 있다고 생각한다. 연락처 버튼의 href 속성을 index.html#contact으로 설정하면됩니다. index.html에서 #contact을 사용할 수 있으며 똑같은 작업을 수행합니다. 된 index.html에서

, 헤더 : 된 index.html에서 헤더를 제거 index.html

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="index.html#contact">Contact</a> 
</div> 

가되도록, 회로드되는 것을 방지 페이지 :

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="#contact">Contact</a> 
</div> 

하지만 다른 페이지

jQuery는 단순히 페이지를 아래로 스크롤한다.

는 앵커 태그의 href 속성을 사용하기 때문에, 그것은 #contact로 온다, jQuery를이 ID로 해석 : 당신의 코드를 테스트하는 동안

0

리틀 팁 나는 가로 질러왔다.

앵커가 페이지에 관계없이 작동하려면 앵커에 id = "contact"를 추가해야합니다.

1

마지막 라인이없는 스크립트가 정상이 시도

(function ($) { 

    var jump = function (e) { 
     if (e) { 

      e.preventDefault(); 
      var target = $(this).attr("href"); 

     } else { 

      var target = location.hash; 

     } 
     $('html,body').animate({ 

      scrollTop: $(target).offset().top 

     }, 1000, function() { 

      location.hash = target; 

     }); 
    } 

    $('html, body').hide(); 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

     if (location.hash) { 
      setTimeout(function() { 

       $('html, body').scrollTop(0).show() 
       jump(); 

      }, 0); 
     } else { 

      $('html, body').show(); 

     } 
    }); 
})(jQuery) 
관련 문제