JavaScript để cuộn trang dài đến DIV

Tôi có một liên kết trên một trang HTML dài. Khi tôi nhấp vào nó, tôi muốn một divphần khác của trang hiển thị trong cửa sổ bằng cách cuộn vào xem.

Một chút giống như EnsureVisibletrong các ngôn ngữ khác.

Tôi đã kiểm tra scrollTopvà scrollTochúng có vẻ giống như những chiếc đàn màu đỏ.

Có ai giúp được không?

câu hỏi cũ, nhưng nếu có ai tìm thấy điều này thông qua google (như tôi đã làm) và ai không muốn sử dụng neo hoặc jquery; có một chức năng javascript nội sẵn để 'chuyển' đến một phần tử;

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

và điều gì còn tốt hơn nữa; theo bảng tương thích tuyệt vời trên quirksmode, điều này được hỗ trợ bởi tất cả các trình duyệt chính !

Nếu bạn không muốn thêm phần mở rộng bổ sung, mã sau sẽ hoạt động với 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;
        }
    });

Làm thế nào về JQuery ScrollTo - hãy xem mã mẫu này

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

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

Không cần di chuyển cầu kỳ nhưng nó sẽ đưa bạn đến đó.

Khó khăn với việc cuộn là bạn có thể không chỉ cần cuộn trang để hiển thị một div mà còn có thể cần cuộn bên trong các div có thể cuộn ở bất kỳ cấp độ nào.

Thuộc tính scrollTop có sẵn trên bất kỳ phần tử DOM nào, bao gồm cả nội dung tài liệu. Bằng cách đặt nó, bạn có thể kiểm soát mức độ cuộn xuống của nội dung nào đó. Bạn cũng có thể sử dụng các thuộc tính clientHeight và scrollHeight để xem mức độ cuộn cần thiết (có thể cuộn khi clientHeight (khung nhìn) nhỏ hơn scrollHeight (chiều cao của nội dung).

Bạn cũng có thể sử dụng thuộc tính offsetTop để tìm ra vị trí của phần tử trong vùng chứa.

Để xây dựng quy trình "cuộn vào chế độ xem" thực sự có mục đích chung từ đầu, bạn cần bắt đầu ở nút bạn muốn hiển thị, đảm bảo rằng nút đó nằm trong phần hiển thị của nút gốc, sau đó lặp lại tương tự cho nút gốc, v.v. con đường cho đến khi bạn đạt đến đỉnh.

Một bước của bước này sẽ trông giống như thế này (mã chưa được kiểm tra, không kiểm tra các trường hợp cạnh):

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

Bạn có thể sử dụng Element.scrollIntoView()phương pháp như đã đề cập ở trên. Nếu bạn để nó không có thông số bên trong, bạn sẽ có một cuộn xấu xí ngay lập tức . Để tránh điều đó, bạn có thể thêm tham số này - behavior:"smooth".

Thí dụ:

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

Chỉ cần thay thế scroll-here-plzbằng của bạn divhoặc phần tử trên một trang web. Và nếu bạn thấy phần tử của mình ở cuối cửa sổ hoặc vị trí không như bạn mong đợi, hãy chơi với tham số block: "". Bạn có thể sử dụng block: "start", block: "end"hoặc block: "center".

Hãy nhớ: Luôn sử dụng các tham số bên trong một đối tượng {}.

Nếu bạn vẫn gặp sự cố, hãy truy cập https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Có tài liệu chi tiết cho phương pháp này.

Điều này đã làm việc cho tôi

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

Câu trả lời được đăng ở đây - cùng một giải pháp cho vấn đề của bạn.

Chỉnh sửa: câu trả lời JQuery rất hay nếu bạn muốn cuộn mượt mà - tôi chưa thấy điều đó hoạt động trước đây.

Tại sao không phải là một mỏ neo được đặt tên?

Thuộc tính bạn cần là location.hash. Ví dụ:

location.hash = 'top'; // sẽ chuyển đến mỏ neo được đặt tên "trên cùng

Tôi không biết làm thế nào để tạo hoạt ảnh cuộn đẹp mắt mà không cần sử dụng dojo hoặc một số bộ công cụ tương tự, nhưng nếu bạn chỉ cần nó chuyển đến một mỏ neo, location.hash nên làm điều đó.

(đã thử nghiệm trên FF3 và Safari 3.1.2)

Tôi không thể thêm nhận xét vào câu trả lời của futtta ở trên, nhưng để sử dụng cuộn mượt mà hơn:

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

scrollTop (IIRC) là nơi cuộn đầu trang đến trong tài liệu. scrollĐể cuộn trang sao cho đầu trang là nơi bạn chỉ định.

Những gì bạn cần ở đây là một số kiểu thao tác Javascript. Giả sử nếu bạn muốn div ở ngoài màn hình và cuộn vào từ bên phải, bạn sẽ đặt thuộc tính bên trái của div thành chiều rộng của trang và sau đó giảm nó đi một lượng đã đặt sau mỗi vài giây cho đến khi nó ở nơi bạn muốn.

Điều này sẽ giúp bạn đi đúng hướng.

Bổ sung: Tôi xin lỗi, tôi nghĩ bạn muốn một div riêng biệt 'bật ra' từ một nơi nào đó (đôi khi giống như trang web này làm vậy) và không chuyển toàn bộ trang sang một phần. Sử dụng neo đúng cách sẽ đạt được hiệu quả đó.

Có một plugin jQuery cho trường hợp chung là cuộn đến phần tử DOM, nhưng nếu hiệu suất là một vấn đề (và khi nào thì không?), Tôi khuyên bạn nên thực hiện theo cách thủ công. Điều này bao gồm hai bước:

1. Tìm vị trí của phần tử bạn đang cuộn đến.
2. Di chuyển đến vị trí đó.

quirksmode đưa ra lời giải thích tốt về cơ chế đằng sau cái trước. Đây là giải pháp ưa thích của tôi:

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

Nó sử dụng ép kiểu từ null đến 0, đây không phải là nghi thức thích hợp trong một số vòng kết nối, nhưng tôi thích nó :) Phần thứ hai sử dụng window.scroll. Vì vậy, phần còn lại của giải pháp là:

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

Thì đấy!

Cá nhân tôi thấy câu trả lời dựa trên jQuery của Josh ở trên là câu trả lời hay nhất mà tôi thấy và hoạt động hoàn hảo cho ứng dụng của tôi ... tất nhiên, tôi đã sử dụng jQuery ... Tôi chắc chắn sẽ không bao gồm toàn bộ thư viện jQ chỉ cho điều đó một mục đích.

Chúc mừng!

CHỈNH SỬA: OK ... chỉ vài giây sau khi đăng bài này, tôi đã thấy một câu trả lời khác ngay bên dưới của tôi (không chắc liệu có còn bên dưới tôi không sau khi chỉnh sửa) cho biết sử dụng:

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

Điều này hoạt động hoàn hảo và ít mã hơn nhiều so với phiên bản jQuery! Tôi không biết rằng có một hàm tích hợp sẵn trong JS được gọi là .scrollIntoView (), nhưng nó có! Vì vậy, nếu bạn muốn có hình ảnh động lạ mắt, hãy sử dụng jQuery. Nhanh chóng bẩn thỉu ... sử dụng cái này!

Để cuộn trơn tru, mã này rất hữu ích

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

Hãy sửa cho tôi nếu tôi sai nhưng tôi đang đọc đi đọc lại câu hỏi và vẫn nghĩ rằng Angus McCoteup đang hỏi cách đặt một phần tử ở vị trí: fixed.

Angus McCoteup, hãy xem http://www.cssplay.co.uk/layouts/fixed.html - nếu bạn muốn DIV của mình hoạt động như một menu ở đó, hãy xem CSS ở đó