[JQUERY] 사업부 사용 JQuery와 스크롤

사업부 사용 JQuery와 스크롤

해결법

1. ---

   1.첫째, 연락처 사업부를 포함하지 않는 코드, 그것은 연락처 사업부가 있습니다!

   첫째, 연락처 사업부를 포함하지 않는 코드, 그것은 연락처 사업부가 있습니다!

   사이드 바에서 당신은 당신이 연락처를 가지고있는 페이지의 하단에있는 사업부의 접촉이있다. 나는 코드 샘플의 최종의 제거. (당신은 또한 사이드 바에서 projectslink ID를 맞춤법이 틀린).

   둘째, jQuery를 참조 페이지에서 클릭에 대한 예제의 일부를보십시오. 당신은 object.click 같은 클릭을 사용해야합니다 (함수 () {// 당신의 코드 여기}); 아래에있는 내 예제에서 객체에 대한 클릭 이벤트 처리기 ....처럼 바인딩하기 위해서이다. 여담으로, 당신은 또한 단지 object.click처럼, 인수없이 사용하여 객체에 대한 클릭을 트리거 할 수 있습니다 ().

   셋째, scrollTo는 jQuery를에있는 플러그인입니다. 당신이 플러그인이 설치되어있는 경우 모르겠어요. 당신은 플러그인없이 scrollTo ()를 사용할 수 없습니다. 나는이 플러그인을 사용하는 이유를 볼 수 있도록이 경우, 원하는 기능은 코드의 2 라인입니다.

   좋아, 지금은 솔루션에.

   사이드 바에서 링크를 클릭하면 아래의 코드는 올바른 사업부로 이동합니다. 창 스크롤 있도록 충분히 큰해야 않습니다

   // This is a functions that scrolls to #{blah}link
   function goToByScroll(id) {
       // Remove "link" from the ID
       id = id.replace("link", "");
       // Scroll
       $('html,body').animate({
           scrollTop: $("#" + id).offset().top
       }, 'slow');
   }
   
   $("#sidebar > ul > li > a").click(function(e) {
       // Prevent a page reload when a link is pressed
       e.preventDefault();
       // Call the scroll function
       goToByScroll(this.id);
   });
   

   라이브 예

   (스크롤 기능에 여기에서 촬영)

   추신 : 분명히 대신 태그 ㅋ 를 ... ㅋ 제목 에 앵커를 사용하여이 경로를 이동하는 강력한 이유가 있어야합니다

2. ---

   2.jQuery를에는 .scrollTo () 메소드는 없다,하지만 .scrollTop () 하나가있다. .scrollTop는 스크롤바가 이동한다 화소 값 파라미터를 기대한다.

   jQuery를에는 .scrollTo () 메소드는 없다,하지만 .scrollTop () 하나가있다. .scrollTop는 스크롤바가 이동한다 화소 값 파라미터를 기대한다.

   예:

   $(window).scrollTop(200);
   

   (거기에 충분한 내용이있는 경우) 창을 스크롤됩니다.

   당신이 .offset () 또는 .position이 원하는 값을 얻을 수 있도록 ().

   예:

   $(window).scrollTop($('#contact').offset().top);
   

   이보기에 #contact 요소를 스크롤합니다.

   비 jQuery를 대체 방법 .scrollIntoView ()이다. 당신은 같은 모든 DOM 요소의 메소드를 호출 할 수 있습니다 :

   $('#contact')[0].scrollIntoView(true);
   

   사실 거짓 뷰의 바닥에 놓여지는 반면 소자가 상부에 위치하는 것을 나타낸다. JQuery와 방법으로 좋은 일이 당신도 .animate 같은 FX의 기능을 사용할 수있다 (). 그래서 당신은 스크롤 뭔가를 원활하게 할 수 있습니다.

   참조 : .scrollTop () .position (), .offset ()

3. ---

   3.당신은 시도 할 수 있습니다 :

   당신은 시도 할 수 있습니다 :

   $("#MediaPlayer").ready(function(){
       $("html, body").delay(2000).animate({
           scrollTop: $('#MediaPlayer').offset().top 
       }, 2000);
   });
   

4. ---

   4.이 작은 기능을 추가하고 사용할 수 있도록 :. $ ( 'DIV') scrollTo (500);

   이 작은 기능을 추가하고 사용할 수 있도록 :. $ ( 'DIV') scrollTo (500);

   jQuery.fn.extend(
   {
     scrollTo : function(speed, easing)
     {
       return this.each(function()
       {
         var targetOffset = $(this).offset().top;
         $('html,body').animate({scrollTop: targetOffset}, speed, easing);
       });
     }
   });
   

5. ---

   5.OK 사람들이 작은 솔루션이지만, 그것을 잘 작동합니다.

   OK 사람들이 작은 솔루션이지만, 그것을 잘 작동합니다.

   다음 코드를 가정 :

   <div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
     <div class='post'>1st post</div>
     <div class='post'>2nd post</div>
     <div class='post'>3rd post</div>
   </div>
   

   새 게시물이 'the_div_holder'다음은 채팅처럼 마지막에 그것의 내부 컨텐츠 (사업부의 .post)를 스크롤에 추가 될 때 당신이 원하는. 그래서, 새로운 .post 주 DIV 홀더에 추가 될 때마다 다음을 수행 :

   var scroll = function(div) {
       var totalHeight = 0;
       div.find('.post').each(function(){
          totalHeight += $(this).outerHeight();
       });
       div.scrollTop(totalHeight);
     }
     // call it:
     scroll($('#the_div_holder'));
   

6. ---

   6.먼저 U jQuery와 위치 () 메소드에 의해 이동하고자하는 개까지 div 요소의 위치를 ​​얻는다. 예 :. var에 POS = $ ( "DIV") 위치 (); 이어서 ".top"방법으로 그 요소의 Y 좌표, (높이)를 얻는다. 예 : pos.top; 그런 다음 ".left"방법과 그 DIV 요소의 x 좌표, 얻을. 이 방법은 CSS의 위치에서 유래한다. 우리는 X 및 Y 좌표,을 받으면, 우리는 자바 스크립트의 scrollTo ()를 사용할 수 있습니다; 방법. 이 방법은 특정 높이 및 폭 개까지 문서를 스크롤. 또한, X 좌표, Y와 같은 두 개의 매개 변수. 구문 : window.scrollTo (X, Y); 이어서 바로 scrollTo () 함수에서 DIV 소자의 X 및 Y 좌표, 합격. ↓ 아래의 예를 참조하십시오 ↓

   먼저 U jQuery와 위치 () 메소드에 의해 이동하고자하는 개까지 div 요소의 위치를 ​​얻는다. 예 :. var에 POS = $ ( "DIV") 위치 (); 이어서 ".top"방법으로 그 요소의 Y 좌표, (높이)를 얻는다. 예 : pos.top; 그런 다음 ".left"방법과 그 DIV 요소의 x 좌표, 얻을. 이 방법은 CSS의 위치에서 유래한다. 우리는 X 및 Y 좌표,을 받으면, 우리는 자바 스크립트의 scrollTo ()를 사용할 수 있습니다; 방법. 이 방법은 특정 높이 및 폭 개까지 문서를 스크롤. 또한, X 좌표, Y와 같은 두 개의 매개 변수. 구문 : window.scrollTo (X, Y); 이어서 바로 scrollTo () 함수에서 DIV 소자의 X 및 Y 좌표, 합격. ↓ 아래의 예를 참조하십시오 ↓

   <!DOCTYPE HTML>
       <html>
       <head>
           <title>
               Scroll upto Div with jQuery.
           </title>
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
           <script>
               $(document).ready(function () {
                   $("#button1").click(function () {
                       var x = $("#element").position(); //gets the position of the div element...
                       window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                       //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                   });
               });
               </script>
       </head>
       <body>
           <button id="button1">
               Click here to scroll
           </button>
   
           <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
               The DIV element.
               </div>
           </body>
       </html>
   

7. ---

   7.필요가 없습니다 너무이 있습니다. 그냥 단순히 태그의 HREF에 DIV ID를 추가

   필요가 없습니다 너무이 있습니다. 그냥 단순히 태그의 HREF에 DIV ID를 추가

   <li><a id = "aboutlink" href="#about">auck</a></li>
   

   그냥 그렇게.

from https://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery by cc-by-sa and MIT license