ฉันจะเลื่อนไปยังตำแหน่งเฉพาะบนเพจโดยใช้ jquery ได้อย่างไร?

เป็นไปได้ไหมที่จะเลื่อนไปยังตำแหน่งเฉพาะบนเพจโดยใช้ jQuery?

ตำแหน่งที่ฉันต้องการเลื่อนต้องมี:

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

หรือสามารถย้ายไปยังรหัส DOM เฉพาะได้หรือไม่

jQuery Scroll Plugin

เนื่องจากนี่เป็นคำถามที่ติดแท็กด้วย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 ธรรมดาก็ค่อนข้างง่าย คุณให้รหัสองค์ประกอบจากนั้นคุณสามารถใช้เป็น "ที่คั่นหน้า":

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

หากคุณต้องการให้มันเลื่อนไปที่นั่นเมื่อผู้ใช้คลิกลิงก์คุณสามารถใช้วิธีการที่พยายามและจริง:

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

มันจะเลื่อนโดยอัตโนมัติ อย่าลืมใส่คำนำหน้า "#"

Javascript ธรรมดา:

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 เฉพาะเช่น 'idVal' ในกรณีนี้ หากคุณมี div / ตารางที่ตามมาซึ่งจะเปิดขึ้นในหน้านี้ผ่าน ajax คุณสามารถกำหนด 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";
});

นี่คือตัวแปรของ @ ไรย์-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
            });
        }
    });
};

ใช้ jquery.easing.min.js ด้วยข้อผิดพลาดคอนโซล IE แบบคงที่

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;เพื่อทำสิ่งนี้ได้โดยไม่ต้องใช้ Javascript

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