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

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요소scrollTopscrollLeft

$('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>

This example shows to locate to a particular div id i.e, 'idVal' in this case. If you have subsequent divs/tables that will open up in this page via ajax, then you can assign unique divs and call the script to scroll to the particular location for each contents of divs.

Hope this will be useful.

---

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

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

---

Try this

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

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

---

Here is variant of @juraj-blahunka's lightweight approach. This function does not assume the container is the document and only scrolls if the item is out of view. Animation queuing is also disabled to avoid unnecessary bouncing.

$.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
            });
        }
    });
};

---

Using jquery.easing.min.js, With fixed IE console Errors

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

---

You can use scroll-behavior: smooth; to get this done without Javascript

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

참고URL : https://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery