jquery를 사용하여 페이지의 특정 위치로 스크롤하려면 어떻게해야합니까?

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

스크롤하려는 위치에 있어야합니까?

<a name="#123">here</a>

아니면 특정 DOM ID로 이동할 수 있습니까?

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();

페이지 좌표로 스크롤

애니메이션 html과 body와 요소 scrollTop또는 scrollLeft속성

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

일반 자바 스크립트

스크롤 window.scroll

window.scroll(horizontalOffset, verticalOffset);

요약하면 window.location.hash를 사용하여 ID가있는 요소로 이동하십시오.

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>

그렇습니다. 일반 JavaScript에서도 매우 쉽습니다. 요소에 ID를 부여한 다음 "책갈피"로 사용할 수 있습니다.

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

사용자가 링크를 클릭 할 때 스크롤되도록하려면, try-and-true 방법을 사용하면됩니다.

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

프로그래밍 방식으로 수행하려면 scrollIntoView()

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

플러그인을 사용할 필요가 없으며 다음과 같이 할 수 있습니다.

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

그런 다음 이것을 사용하여 문서를 특정 DOM으로 스크롤하십시오.

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

순수한 자바 스크립트 버전은 다음과 같습니다.

location.hash = '#123';

자동으로 스크롤됩니다. "#"접두사를 추가해야합니다.

일반 자바 스크립트 :

window.location = "#elementId"

<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>

이 예는이 경우 특정 div id, 즉 'idVal'을 찾는 방법을 보여줍니다. 이 페이지에서 ajax를 통해 열리는 div / 테이블이있는 경우 고유 한 div를 할당하고 스크립트를 호출하여 div의 각 컨텐츠에 대한 특정 위치로 스크롤 할 수 있습니다.

이것이 도움이 되길 바랍니다.

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

            return false;
        });
    })
</script>

이 시도

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

@ juraj-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
            });
        }
    });
};

고정 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();
            });
        });

scroll-behavior: smooth;자바 스크립트 없이이 작업을 수행 하는 데 사용할 수 있습니다

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