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

Program / 글쓴이

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>