[JQUERY] 어떻게 jQuery를 사용하여 페이지의 특정 위치로 스크롤 할 수 있습니다?

어떻게 jQuery를 사용하여 페이지의 특정 위치로 스크롤 할 수 있습니다?

해결법

1. ---

   1.jQuery를 스크롤 플러그인

   jQuery를 스크롤 플러그인

   문제는이 라이브러리가 부드러운 스크롤에 대한 아주 좋은 플러그인을 가지고 내가 말을 jQuery로 태그 된 질문이기 때문에, 당신은 그것을 여기에서 찾을 수 있습니다 : http://plugins.jquery.com/scrollTo/

   문서에서 발췌 :

   $('div.pane').scrollTo(...);//all divs w/class pane
   

   또는

   $.scrollTo(...);//the plugin will take care of this
   

   스크롤에 대한 사용자의 jQuery 기능

   당신은 사용자 정의 스크롤 JQuery와 함수를 정의하여 매우 가벼운 접근 방식을 사용할 수 있습니다

   $.fn.scrollView = function () {
       return this.each(function () {
           $('html, body').animate({
               scrollTop: $(this).offset().top
           }, 1000);
       });
   }
   

   그것을 같이 사용 :

   $('#your-div').scrollView();
   

   스크롤 페이지 좌표

   scrollTop 또는 scrollLeft에 속성을 애니메이션 HTML과 신체 요소

   $('html, body').animate({
       scrollTop: 0,
       scrollLeft: 300
   }, 1000);
   

   일반 자바 스크립트

   window.scroll로 스크롤

   window.scroll(horizontalOffset, verticalOffset);
   

   단지, 합계 ID와 요소로 이동합니다하면 window.location.hash를 사용하는

   window.location.hash = '#your-page-element';
   

   직접 HTML에서 (접근성 향상)

   <a href="#your-page-element">Jump to ID</a>
   
   <div id="your-page-element">
       will jump here
   </div>
   

2. ---

   2.네, 심지어 일반 자바 스크립트에서 아주 간단합니다. 당신은 요소에게 ID를 제공하고 당신은 "즐겨 찾기"로 그것을 사용할 수 있습니다 :

   네, 심지어 일반 자바 스크립트에서 아주 간단합니다. 당신은 요소에게 ID를 제공하고 당신은 "즐겨 찾기"로 그것을 사용할 수 있습니다 :

   <div id="here">here</div>
   

   당신이 거기에 사용자가 링크를 클릭 할 때 스크롤하려는 경우, 당신은 단지 유효성이 입증 된 방법을 사용할 수 있습니다 :

   <a href="#here">scroll to over there</a>
   

   프로그래밍 방식으로 작업을 수행하려면) (scrollIntoView를 사용

   document.getElementById("here").scrollIntoView()
   

3. ---

   3.당신이 이런 식으로 할 수있는 플러그인을 사용할 필요가 없습니다 :

   당신이 이런 식으로 할 수있는 플러그인을 사용할 필요가 없습니다 :

   var divPosition = $('#divId').offset();
   

   다음 특정 DOM에 문서를 스크롤 할 때 사용합니다 :

   $('html, body').animate({scrollTop: divPosition.top}, "slow");
   

4. ---

   4.여기에 순수 자바 스크립트 버전입니다 :

   여기에 순수 자바 스크립트 버전입니다 :

   location.hash = '#123';
   

   자동으로 스크롤 할 수 있습니다. 은 "#"접두사를 추가해야합니다.

5. ---

   5.일반 자바 스크립트 :

   일반 자바 스크립트 :

   window.location = "#elementId"
   

6. ---

   6.

   <div id="idVal">
       <!--div content goes here-->
   </div>
   ...
   <script type="text/javascript">
        $(document).ready(function(){
            var divLoc = $('#idVal').offset();
            $('html, body').animate({scrollTop: divLoc.top}, "slow");
        });
   </script>
   

   이 예제 프로그램은이 경우 특정 사업부 아이디 즉, 'idVal'를 찾습니다. 당신이 아약스이 페이지에서 열립니다 연속 된 div / 테이블이있는 경우에, 당신은 독특한 된 div를 할당하고 div의 각 내용의 특정 위치에 스크롤에 스크립트를 호출 할 수 있습니다.

   이 도움이 될 것입니다 바랍니다.

7. ---

   7.

   <script type="text/javascript">
       $(document).ready(function(){
           $(".scroll-element").click(function(){
               $('html,body').animate({
                   scrollTop: $('.our_companies').offset().top
               }, 1000);
   
               return false;
           });
       })
   </script>
   

8. ---

   8.이 시도

   이 시도

   <div id="divRegister"></div>
   
   $(document).ready(function() {
   location.hash = "divRegister";
   });
   

9. ---

   9.여기 유라이-blahunka의 가벼운 접근 @의 변종이다. 컨테이너를 가정하지 않는이 기능은 문서이며 항목이보기 밖으로 경우에만 스크롤합니다. 애니메이션 대기열은 불필요한 수신 거부를 방지하기 위해 사용할 수 없습니다.

   여기 유라이-blahunka의 가벼운 접근 @의 변종이다. 컨테이너를 가정하지 않는이 기능은 문서이며 항목이보기 밖으로 경우에만 스크롤합니다. 애니메이션 대기열은 불필요한 수신 거부를 방지하기 위해 사용할 수 없습니다.

   $.fn.scrollToView = function () {
       return $.each(this, function () {
           if ($(this).position().top < 0 ||
               $(this).position().top + $(this).height() > $(this).parent().height()) {
               $(this).parent().animate({
                   scrollTop: $(this).parent().scrollTop() + $(this).position().top
               }, {
                   duration: 300,
                   queue: false
               });
           }
       });
   };
   

10. ---

    10.고정 IE 콘솔 오류, jquery.easing.min.js 사용

    고정 IE 콘솔 오류, jquery.easing.min.js 사용

    html로

    <a class="page-scroll" href="#features">Features</a>
    <section id="features" class="features-section">Features Section</section>
    
    
            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="js/jquery.js"></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="js/bootstrap.min.js"></script>
    
            <!-- Scrolling Nav JavaScript -->
            <script src="js/jquery.easing.min.js"></script>
    

    JQuery와

    //jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
            $(window).scroll(function () {
                if ($(".navbar").offset().top > 50) {
                    $(".navbar-fixed-top").addClass("top-nav-collapse");
                } else {
                    $(".navbar-fixed-top").removeClass("top-nav-collapse");
                }
            });
            //jQuery for page scrolling feature - requires jQuery Easing plugin
            $(function () {
                $('a.page-scroll').bind('click', function (event) {
                    var anchor = $(this);
                    if ($(anchor).length > 0) {
                        var href = $(anchor).attr('href');
                        if ($(href.substring(href.indexOf('#'))).length > 0) {
                            $('html, body').stop().animate({
                                scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                            }, 1500, 'easeInOutExpo');
                        }
                        else {
                            window.location = href;
                        }
                    }
                    event.preventDefault();
                });
            });
    

11. ---

    11.당신은 스크롤 동작을 사용할 수 있습니다 부드럽게; 이 자바 스크립트없이 완수하기

    당신은 스크롤 동작을 사용할 수 있습니다 부드럽게; 이 자바 스크립트없이 완수하기

    https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

from https://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery by cc-by-sa and MIT license