JavaScript เพื่อเลื่อนหน้ายาวไปที่ DIV

ฉันมีลิงก์ในหน้า HTML ยาว ๆ เมื่อฉันคลิกฉันต้องการให้divส่วนอื่นของหน้าสามารถมองเห็นได้ในหน้าต่างโดยการเลื่อนเข้าไปดู

เหมือน EnsureVisibleในภาษาอื่น ๆ

ฉันเช็คเอาท์scrollTopแล้วscrollToแต่ดูเหมือนปลาเฮอริ่งแดง

ใครสามารถช่วย?

คำถามเก่า แต่ถ้าใครเจอผ่าน google (เหมือนที่เคยทำ) และใครไม่อยากใช้ anchors หรือ jquery; มีฟังก์ชันจาวาสคริปต์ในตัวเพื่อ "ข้าม" ไปยังองค์ประกอบ

document.getElementById('youridhere').scrollIntoView();

และอะไรจะดีไปกว่านั้น ตามตารางความเข้ากันได้ที่ยอดเยี่ยมในโหมดเล่นโวหารสิ่งนี้ได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมด !

หากคุณไม่ต้องการเพิ่มส่วนขยายเพิ่มเติมโค้ดต่อไปนี้ควรใช้กับ jQuery

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

วิธีการเกี่ยวกับJQuery ScrollTo - ดูโค้ดตัวอย่างนี้

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

ไม่มีการเลื่อนแบบแฟนซี แต่ควรพาคุณไปที่นั่น

ความยากลำบากในการเลื่อนคือคุณอาจไม่เพียง แต่ต้องเลื่อนหน้าเพื่อแสดง div แต่คุณอาจต้องเลื่อนภายใน div ที่เลื่อนได้ในหลายระดับด้วยเช่นกัน

คุณสมบัติ scrollTop มีอยู่ในองค์ประกอบ DOM ใด ๆ รวมถึงเนื้อหาของเอกสาร ด้วยการตั้งค่านี้คุณสามารถควบคุมได้ว่าจะเลื่อนบางสิ่งลงไปมากแค่ไหน คุณยังสามารถใช้คุณสมบัติ clientHeight และ scrollHeight เพื่อดูว่าจำเป็นต้องใช้การเลื่อนมากแค่ไหน (สามารถเลื่อนได้เมื่อ clientHeight (วิวพอร์ต) น้อยกว่า scrollHeight (ความสูงของเนื้อหา)

คุณยังสามารถใช้คุณสมบัติ offsetTop เพื่อดูว่าองค์ประกอบนั้นอยู่ที่ใดในคอนเทนเนอร์

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

ขั้นตอนเดียวจะมีลักษณะดังนี้ (รหัสที่ยังไม่ทดสอบไม่ได้ตรวจสอบขอบกรณี):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

คุณสามารถใช้Element.scrollIntoView()วิธีการตามที่กล่าวไว้ข้างต้น หากคุณปล่อยให้มันมีพารามิเตอร์ภายในคุณไม่มีจะมีทันทีเลื่อนที่น่าเกลียด เพื่อป้องกันการที่คุณสามารถเพิ่มพารามิเตอร์นี้ behavior:"smooth"-

ตัวอย่าง:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

เพียงแค่แทนที่scroll-here-plzด้วยdivหรือองค์ประกอบของคุณบนเว็บไซต์ block: ""และถ้าคุณเห็นองค์ประกอบของคุณที่ด้านล่างของหน้าต่างของคุณหรือตำแหน่งที่ไม่ได้เป็นสิ่งที่คุณคาดว่าจะมีการเล่นกับพารามิเตอร์ คุณสามารถใช้block: "start", หรือblock: "end"block: "center"

ข้อควรจำ: ใช้พารามิเตอร์ภายในออบเจ็กต์เสมอ {}

หากคุณยังคงพบปัญหาให้ไปที่https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

มีเอกสารรายละเอียดสำหรับวิธีนี้

สิ่งนี้ได้ผลสำหรับฉัน

document.getElementById('divElem').scrollIntoView();

คำตอบโพสต์ที่นี่ - วิธีแก้ปัญหาเดียวกันกับคุณ

แก้ไข: คำตอบของ JQuery นั้นดีมากหากคุณต้องการการเลื่อนที่ราบรื่น - ฉันไม่เคยเห็นมาก่อน

ทำไมไม่ยึดชื่อ?

คุณสมบัติที่คุณต้องการคือ location.hash ตัวอย่างเช่น:

location.hash = 'top'; // จะข้ามไปที่ชื่อ anchor "ด้านบน

ฉันไม่รู้ว่าจะทำแอนิเมชั่นการเลื่อนที่ดีได้อย่างไรโดยไม่ต้องใช้ dojo หรือชุดเครื่องมือบางอย่างเช่นนั้น แต่ถ้าคุณต้องการเพียงแค่ข้ามไปยังจุดยึดตำแหน่งควรทำแฮช

(ทดสอบกับ FF3 และ Safari 3.1.2)

ฉันไม่สามารถเพิ่มความคิดเห็นในการตอบกลับของ futtta ด้านบน แต่เพื่อการเลื่อนที่ราบรื่นยิ่งขึ้น:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

scrollTop (IIRC) คือตำแหน่งที่เลื่อนไปที่ด้านบนสุดของหน้าในเอกสาร เลื่อนเพื่อเลื่อนหน้าให้ด้านบนสุดของหน้าเป็นตำแหน่งที่คุณระบุ

สิ่งที่คุณต้องการที่นี่คือรูปแบบที่ปรับแต่ง Javascript สมมติว่าคุณต้องการ div นอกหน้าจอหรือไม่และเลื่อนเข้ามาจากทางขวาคุณจะตั้งค่าแอตทริบิวต์ด้านซ้ายของ div เป็นความกว้างของหน้าจากนั้นลดลงตามจำนวนที่กำหนดทุกๆสองสามวินาทีจนกว่าจะถึงที่ที่คุณต้องการ

สิ่งนี้ควรชี้ให้คุณไปในทิศทางที่ถูกต้อง

เพิ่มเติม: ฉันขอโทษฉันคิดว่าคุณต้องการให้ div แยกต่างหากเพื่อ "ป๊อปอัป" จากที่ใดที่หนึ่ง (บางครั้งก็เหมือนกับไซต์นี้) และไม่ย้ายทั้งหน้าไปยังส่วนใดส่วนหนึ่ง การใช้พุกอย่างเหมาะสมจะได้ผล

มีปลั๊กอิน jQueryสำหรับกรณีทั่วไปของการเลื่อนไปยังองค์ประกอบ DOM แต่หากประสิทธิภาพเป็นปัญหา (และเมื่อใดไม่เป็นเช่นนั้น) ฉันขอแนะนำให้ทำด้วยตนเอง สิ่งนี้เกี่ยวข้องกับสองขั้นตอน:

1. การค้นหาตำแหน่งขององค์ประกอบที่คุณกำลังเลื่อนไป
2. เลื่อนไปที่ตำแหน่งนั้น

quirksmodeให้คำอธิบายที่ดีเกี่ยวกับกลไกเบื้องหลังอดีต นี่คือทางออกที่ฉันต้องการ:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

มันใช้หล่อจาก null 0 ซึ่งไม่ได้เป็นมารยาทที่เหมาะสมในวงการบาง แต่ฉันชอบมัน :) window.scrollที่สองใช้เป็นส่วนหนึ่ง วิธีแก้ปัญหาที่เหลือคือ:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

โวลา!

โดยส่วนตัวแล้วฉันพบว่าคำตอบที่ใช้ jQuery ของ Josh ข้างต้นเป็นสิ่งที่ดีที่สุดที่ฉันเห็นและทำงานได้อย่างสมบูรณ์แบบสำหรับแอปพลิเคชันของฉัน ... แน่นอนฉันเป็นแล้วใช้ jQuery ... แน่นอนว่าฉันจะไม่รวมไลบรารี jQ ทั้งหมดไว้แค่นั้น จุดประสงค์เดียว

ไชโย!

แก้ไข: ตกลง ... หลังจากโพสต์สิ่งนี้เพียงไม่กี่วินาทีฉันก็เห็นคำตอบอื่นอยู่ด้านล่างของฉัน (ไม่แน่ใจว่ายังอยู่ต่ำกว่าฉันหรือไม่หลังจากแก้ไข) ที่บอกว่าให้ใช้:

document.getElementById ('your_element_ID_here') scrollIntoView ();

สิ่งนี้ทำงานได้อย่างสมบูรณ์และในโค้ดน้อยกว่ารุ่น jQuery มาก! ฉันไม่รู้เลยว่ามีฟังก์ชันในตัวใน JS ที่เรียกว่า .scrollIntoView () แต่มีอยู่! ดังนั้นหากคุณต้องการแอนิเมชั่นแฟนซีให้ไปที่ jQuery Quick n 'สกปรก ... ใช้อันนี้!

สำหรับการเลื่อนอย่างราบรื่นรหัสนี้มีประโยชน์

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

แก้ไขฉันถ้าฉันผิด แต่ฉันกำลังอ่านคำถามซ้ำแล้วซ้ำอีกและยังคงคิดว่า Angus McCoteup กำลังถามวิธีตั้งค่าองค์ประกอบให้เป็นตำแหน่ง: คงที่

Angus McCoteup โปรดดูที่http://www.cssplay.co.uk/layouts/fixed.html - หากคุณต้องการให้ DIV ของคุณทำงานเหมือนเมนูที่นั่นให้ดู CSS ที่นั่น