Làm cách nào tôi có thể cuộn đến một vị trí cụ thể trên trang bằng cách sử dụng jquery?

Có thể cuộn đến một vị trí cụ thể trên trang bằng jQuery không?

Vị trí tôi muốn cuộn phải có:

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

Hoặc nó chỉ có thể di chuyển đến một id DOM cụ thể?

Plugin cuộn jQuery

vì đây là một câu hỏi được gắn thẻ jquery tôi phải nói, rằng thư viện này có một plugin rất hay để cuộn mượt mà, bạn có thể tìm thấy nó ở đây: http://plugins.jquery.com/scrollTo/

Trích từ Tài liệu:

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

hoặc là

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

Chức năng jQuery tùy chỉnh để cuộn

bạn có thể sử dụng một cách tiếp cận rất nhẹ bằng cách xác định chức năng jquery cuộn tùy chỉnh của mình

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

và sử dụng nó như:

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

Di chuyển đến tọa độ trang

Animate htmlvà bodycác yếu tố có scrollTophoặc scrollLeftthuộc tính

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

Javascript đơn giản

cuộn với window.scroll

window.scroll(horizontalOffset, verticalOffset);

chỉ để tổng hợp, sử dụng window.location.hash để chuyển đến phần tử có ID

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

Trực tiếp trong HTML (cải tiến khả năng truy cập)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Đúng, ngay cả trong JavaScript đơn giản, nó khá dễ dàng. Bạn cung cấp cho một phần tử một id và sau đó bạn có thể sử dụng nó làm "dấu trang":

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

Nếu bạn muốn nó cuộn ở đó khi người dùng nhấp vào một liên kết, bạn chỉ có thể sử dụng phương pháp thử và đúng:

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

Để làm điều đó theo chương trình, sử dụng scrollIntoView()

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

Không cần sử dụng bất kỳ plugin nào, bạn có thể làm như thế này:

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

sau đó sử dụng điều này để cuộn tài liệu đến DOM cụ thể:

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

Đây là phiên bản javascript thuần túy:

location.hash = '#123';

Nó sẽ tự động cuộn. Nhớ thêm tiền tố "#".

Javascript đơn giản:

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>

Ví dụ này hiển thị để xác định vị trí của một id id cụ thể, ví dụ: 'idVal' trong trường hợp này. Nếu bạn có các div / bảng tiếp theo sẽ mở ra trong trang này thông qua ajax, thì bạn có thể gán các div duy nhất và gọi tập lệnh để cuộn đến vị trí cụ thể cho từng nội dung của div.

Hy vọng điều này sẽ hữu ích.

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

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

Thử cái này

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

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

Đây là biến thể của cách tiếp cận gọn nhẹ của @ Juraj-blahunka . Hàm này không cho rằng container là tài liệu và chỉ cuộn nếu mục đó không nhìn thấy. Hàng đợi hoạt hình cũng bị vô hiệu hóa để tránh bị nảy không cần thiết.

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

Sử dụng jquery.ease.min.js, với lỗi bảng điều khiển IE cố định

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

Bạn có thể sử dụng scroll-behavior: smooth;để thực hiện việc này mà không cần Javascript

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