[JQUERY] 다른 페이지에서 ID에 jQuery를 스크롤

다른 페이지에서 ID에 jQuery를 스크롤

해결법

1. ---

   1.당신은 기본적으로이 작업을 수행해야합니다

   당신은 기본적으로이 작업을 수행해야합니다

   이것은 위의 추가와 코드입니다 :

   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
      },2000,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();
       }
   });
   

   크롬 / 사파리, 파이어 폭스와 오페라에서 작업 검증. 하지만 IE에 대한 몰라.

2. ---

   2.링크 해시를 넣어 :

   링크 해시를 넣어 :

   <a href="otherpage.html#elementID">Jump</a>
   

   그리고 다른 페이지에, 당신은 할 수 있습니다 :

   $('html,body').animate({
     scrollTop: $(window.location.hash).offset().top
   });
   

   다른 페이지에서 스크롤을 elementId로부터 이드 세트를 요소가 있어야합니다. 물론 당신은 그것의 이름을 변경할 수 있습니다.

3. ---

   3.페트르 및 Sarfraz로 답변을 결합, 나는 다음에 도착.

   페트르 및 Sarfraz로 답변을 결합, 나는 다음에 도착.

   page1.html에서 :

   <a href="page2.html#elementID">Jump</a>
   

   page2.html에서 :

   <script type="text/javascript">
       $(document).ready(function() {
           $('html, body').hide();
   
           if (window.location.hash) {
               setTimeout(function() {
                   $('html, body').scrollTop(0).show();
                   $('html, body').animate({
                       scrollTop: $(window.location.hash).offset().top
                       }, 1000)
               }, 0);
           }
           else {
               $('html, body').show();
           }
       });
   </script>
   

4. ---

   4.나는 scrollTo 플러그인을 사용하는 것이 좋습니다 싶습니다

   나는 scrollTo 플러그인을 사용하는 것이 좋습니다 싶습니다

   http://demos.flesler.com/jquery/scrollTo/

   JQuery와 CSS를 선택하여 설정 scrollto는 할 수 있습니다.

   $('html,body').scrollTo( $(target), 800 );
   

   나는 .offset () 또는 .position를 사용하여 같은 동일한 효과를 달성하는 다른 방법은 () 과거에 나를 위해 크로스 브라우저로 실패한이 플러그인의 정확성 및 그 방법에 큰 행운이 있었다. 당신이 그런 방법을 사용할 수 없다는 아니, 나는 확실히 크로스 브라우저를 할 수있는 방법이 있어요, 난 그냥 더 신뢰할 수 scrollTo를 발견했습니다.

5. ---

   5.나는이 작업을 수행 할 수있는 재사용 가능한 플러그인을했다 ... 나는 외부 이벤트에 바인딩 왼쪽 내가 그런 작은 도우미 너무 관입 느낌 때문에 자체 플러그인 ....

   나는이 작업을 수행 할 수있는 재사용 가능한 플러그인을했다 ... 나는 외부 이벤트에 바인딩 왼쪽 내가 그런 작은 도우미 너무 관입 느낌 때문에 자체 플러그인 ....

   jQuery(function ($) {
   
       /**
        * This small plugin will scrollTo a target, smoothly
        *
        * First argument = time to scroll to the target
        * Second argument = set the hash in the current url yes or no
        */
       $.fn.smoothScroll = function(t, setHash) {
           // Set time to t variable to if undefined 500 for 500ms transition
           t = t || 500;
           setHash = (typeof setHash == 'undefined') ? true : setHash;
   
           // Return this as a proper jQuery plugin should
           return this.each(function() {
               $('html, body').animate({
                   scrollTop: $(this).offset().top
               }, t);
   
               // Lets set the hash to the current ID since if an event was prevented this doesn't get done
               if (this.id && setHash) {
                   window.location.hash = this.id;
               }
           });
       };
   
   });
   

   이제 다음, 우리는 온로드 단지 해시이 체크를 할 수있는과가 jQuery를위한 선택으로 직접 사용이 시도하는 경우. 지금은 쉽게 시간이 테스트 할 수 있지만,이 immediatly 알려 작동하지 않습니다와 나는 거기에있어 용액에 살펴 보겠습니다 있을지, 얼마 전에 생산 현장 비슷한 물건을했다.

   (스크립트는 온로드 섹션 내에 있어야합니다)

   if (window.location.hash) {
       window.scrollTo(0,0);
       $(window.location.hash).smoothScroll();
   }
   

   우리는 바인딩 옆에있는 플러그인에 onclick을 그들의 HREF 속성의 해시를 포함 앵커.

   (스크립트는 온로드 섹션 내에 있어야합니다)

   $('a[href^="#"]').click(function(e) {
       e.preventDefault();
   
       $($(this).attr('href')).smoothScroll();
   });
   

   경기 자체가 실패하면 jQuery를 아무것도하지 않기 때문에 우리는 페이지에 대상을 찾을 수없는 경우 야호 \ O /을위한 좋은 대체가

   최신 정보

   상단 프로그래머 만 해시로 이동 한 대안의 onclick 핸들러 :

   $('a[href^="#"]').click(function(e) {
       e.preventDefault();
       var href = $(this).attr('href');
   
       // In this case we have only a hash, so maybe we want to scroll to the top of the page?
       if(href.length === 1) { href = 'body' }
   
       $(href).smoothScroll();
   });
   

   다음 페이지에서 스크롤을 보여 온로드 설정하기 조금 어려운 간단한 jsfiddle도입니다 ...

   http://jsfiddle.net/sg3s/bZnWN/

   업데이트 2

   그래서 당신은 윈도우가 이미 요소 온로드에 스크롤에 문제 얻을 수 있습니다. 이 수정한다 : window.scrollTo (0,0); 그냥 왼쪽 상단에 페이지를 스크롤합니다. 위의 코드에 추가되었습니다.

6. ---

   6.

   function scroll_down(){
       $.noConflict();
       jQuery(document).ready(function($) {
           $('html, body').animate({
               scrollTop : $("#bottom").offset().top
           }, 1);
       });
       return false;
   }
   

   여기 "바닥"당신이 이동하고자하는 div 태그 ID입니다. 애니메이션 효과를 변경의 경우 다른 값 '1'에서 시간을 변경할 수 있습니다

7. ---

   7.나는 검출이 페이지에서 클릭 된 앵커가 포함되어있는 경우 뭔가를 작성하고,하지 않을 경우, 정상적인 페이지로 이동 그렇지 않으면 특정 섹션으로 스크롤했습니다 :

   나는 검출이 페이지에서 클릭 된 앵커가 포함되어있는 경우 뭔가를 작성하고,하지 않을 경우, 정상적인 페이지로 이동 그렇지 않으면 특정 섹션으로 스크롤했습니다 :

   $('a[href*=\\#]').on('click',function(e) {
   
       var target = this.hash;
       var $target = $(target);
       console.log(targetname);
       var targetname = target.slice(1, target.length);
   
       if(document.getElementById(targetname) != null) {
            e.preventDefault();
       }
       $('html, body').stop().animate({
           'scrollTop': $target.offset().top-120 //or the height of your fixed navigation 
   
       }, 900, 'swing', function () {
           window.location.hash = target;
     });
   });
   

from https://stackoverflow.com/questions/9652944/jquery-scroll-to-id-from-different-page by cc-by-sa and MIT license