เลื่อนไปที่ ID ในการโหลดหน้า

123

ฉันกำลังพยายามทำให้การเลื่อนไปยัง ID เฉพาะในการโหลดหน้า ฉันได้ทำการวิจัยมากมายและเจอสิ่งนี้:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

แต่ดูเหมือนว่าจะเริ่มจาก ID และเคลื่อนไหวไปที่ด้านบนของหน้า?

HTML (ซึ่งอยู่ครึ่งทางของหน้า) เป็นเพียง:

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— Adi
แหล่งที่มา

1

นี่ไม่ใช่คำตอบมากนัก แต่ฉันขอแนะนำปลั๊กอิน "scrollTo" ของ Ariel Flesler มีคุณสมบัติมากมายสำหรับการแพนหน้าเว็บและส่วนขยายบางส่วนของปลั๊กอินสำหรับกรณีทั่วไป (ตัวอย่างเช่นคุณอาจพบว่าปลั๊กอิน "LocalScroll" มีประโยชน์ในการเลื่อนไปยัง href ของลิงก์หากอยู่ในหน้าเดียวกัน) คุณสามารถรับปลั๊กอินได้ที่นี่: flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

คุณกำลังเลื่อนความสูงขององค์ประกอบเท่านั้น offset ()ส่งคืนพิกัดขององค์ประกอบที่สัมพันธ์กับเอกสารและtopพารามิเตอร์จะให้ระยะห่างขององค์ประกอบเป็นพิกเซลตามแกน y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

และคุณยังสามารถเพิ่มการหน่วงเวลาได้อีกด้วย:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

— BumbleB2na
แหล่งที่มา

1

มันเกี่ยวอะไรกับการเลื่อนอัตโนมัติที่ทำให้ฉันไป "WOW COOL !!"? อาจเป็นความเรียบง่ายของโซลูชันของคุณ

— theblang

ฉันต้องการเลื่อนองค์ประกอบเพื่อดูในการโหลดหน้าเว็บ แต่มีปัญหาสองประการ: a) การใช้ "html, body" ให้การเรียกกลับสองครั้ง (หนึ่งรายการสำหรับแต่ละองค์ประกอบที่ตรงกัน) b) ขึ้นอยู่กับเบราว์เซอร์ว่าเนื้อหาใดหรือ html ทำงานได้ ดังนั้นฉันจึงสร้างส่วนสำคัญที่คุณสามารถปรับใช้ในโปรเจ็กต์ของคุณเพื่อให้แน่ใจว่าการเลื่อนเข้าดูทำงานบนเบราว์เซอร์ "ใดก็ได้" และคุณจะได้รับการติดต่อกลับเพียงครั้งเดียวเมื่อภาพเคลื่อนไหวสิ้นสุดลง gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

นี่ไม่ถูกต้องจริงๆ scrollคุณควรพิจารณาเลื่อนตำแหน่งปัจจุบันของร่างกายหรือองค์ประกอบที่เรากำลังพยายามที่จะ ด้วยเหตุนี้คุณจะต้องเพิ่มตำแหน่งการเลื่อนปัจจุบันของตำแหน่งbodyไปยังoffset().topตำแหน่งขององค์ประกอบที่เราต้องการในมุมมองผลรวมที่ได้คือค่าที่เราต้องการเลื่อนไป $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg คุณได้ลองสิ่งนี้หรือยัง? หากตำแหน่งการเลื่อนปัจจุบันเป็นอะไรที่สูงกว่าค่า 0 สิ่งที่คุณแนะนำอาจไม่ได้ผล สมมติว่าคอนเทนเนอร์แบบเลื่อนได้มีความสูง 1,000 พิกเซลและตำแหน่งการเลื่อนปัจจุบันอยู่ที่ 1,000 สมมติว่าองค์ประกอบที่คุณกำลังเลื่อนไปอยู่ตรงกลางแนวตั้งที่ 500 ฉันคิดว่าสิ่งที่คุณแนะนำจะบอกให้เลื่อนไปที่ 1,500 ใช่มั้ย?

— BumbleB2na

@ BumbleB2na .offset().topจะให้คุณเป็นจำนวนลบในกรณีนี้ และสิ่งนี้ใช้ได้ผลเฉพาะbodyและhtmlเนื่องจากoffset().topจะให้ค่าชดเชยด้านบนของเอกสารไม่ใช่พาเรนต์การเลื่อนที่ตั้งใจไว้

— mattdevio

12

โซลูชันจาวาสคริปต์บริสุทธิ์พร้อมฟังก์ชัน scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

ขยายข้อมูลโค้ด

ตอนนี้พารามิเตอร์ 'smooth' ของ PS ใช้งานได้กับ Chrome 61 ตามที่julien_cกล่าวถึงในความคิดเห็น

— Vladimir Vovk
แหล่งที่มา

1

ใช้งานได้ตอนนี้ (จาก Chrome 61)

— julien_c

อย่าลืมตรวจสอบความเข้ากันได้ของเบราว์เซอร์ตั้งแต่วันที่ 10/2018 IE (11) Edge และ Safari รองรับ "scrollIntoView" แต่ไม่ใช่ตัวเลือก "smooth"

— metal_jacke1

Pure JS ftw. ขอบคุณสำหรับตัวอย่างข้อมูล! เนียนเหมือนครีมทาเนยคู่

— jean d'arme

4

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jQuery-เคลื่อนไหวร่างกายสำหรับทุกเบราว์เซอร์

— AleX สีเทา
แหล่งที่มา

3

มีปลั๊กอิน jquery สำหรับสิ่งนี้ มันจะเลื่อนเอกสารไปยังองค์ประกอบเฉพาะเพื่อให้เอกสารนั้นอยู่ตรงกลางวิวพอร์ตอย่างสมบูรณ์แบบ นอกจากนี้ยังรองรับการค่อยๆเปลี่ยนภาพเคลื่อนไหวเพื่อให้เอฟเฟกต์การเลื่อนดูราบรื่นมาก ตรวจสอบลิงค์นี้

ในกรณีของคุณรหัสคือ

$("#title1").animatedScroll({easing: "easeOutExpo"});

— ยูจีนทิยูริน
แหล่งที่มา

"นอกจากนี้ยังรองรับการค่อยๆเปลี่ยนภาพเคลื่อนไหวเพื่อให้เอฟเฟกต์การเลื่อนดูราบรื่นมาก" น่าเสียดายที่ไม่ได้เป็นจริง หากคอมพิวเตอร์ทำงานช้าด้วยเหตุผลบางประการมันก็กระโดดต่อไปโดยไม่ได้เคลื่อนไหวอย่างถูกต้อง

— brunoais

การเลื่อนอย่างราบรื่นต้องคำนวณพิกเซลจำนวนมาก แน่นอนว่า "คอมพิวเตอร์" ที่ช้า (GPU มากกว่า) ไม่สามารถทำได้ แต่เนื่องจากไม่มี ALU เพียงพอ โดยทั่วไปแล้วเขาพูดถูก และง่ายมากในการเลื่อน lib

— Roland

1

ลองใช้รหัสต่อไปนี้ สร้างองค์ประกอบด้วยชื่อคลาสpage-scrollและเก็บชื่อ id ไว้กับhrefลิงก์ที่เกี่ยวข้อง

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— Akhil
แหล่งที่มา

-3

สำหรับการเลื่อนแบบธรรมดาให้ใช้สไตล์ต่อไปนี้

ความสูง: 200px; ล้น: เลื่อน;

และใช้คลาสสไตล์นี้ซึ่ง div หรือส่วนที่คุณต้องการแสดงการเลื่อน

— มิลลิเมตร
แหล่งที่มา