it-swarm-vi.tech

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 div trên một phần khác của trang sẽ hiển thị trong cửa sổ bằng cách cuộn vào xem.

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

Tôi đã kiểm tra scrollTopscrollTo nhưng chúng có vẻ giống như cá trích đỏ.

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

97
Angus McCoteup

câu hỏi cũ, nhưng nếu bất 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 hàm javascript dựng sẵn để 'nhảy' đến một phần tử;

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

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

369
futtta

Nếu bạn không muốn thêm một phần mở rộng bổ sung, đoạn 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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

Không cuộn lạ mắt nhưng nó sẽ đưa bạn đến đó.

15
mjallday

Khó khăn khi cuộn là bạn có thể không chỉ cần cuộn trang để hiển thị div mà còn có thể cần cuộn bên trong các div có thể cuộn trên bất kỳ số 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 phần thân tài liệu. Bằng cách đặt nó, bạn có thể kiểm soát mức độ di chuyển của một thứ gì đó. Bạn cũng có thể sử dụng các thuộc tính clientHeight và scrollHeight để xem cần bao nhiêu cuộn (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 thói quen "cuộn vào xem" thực sự có mục đích chung từ đầu, bạn sẽ cần bắt đầu tại nút bạn muốn trưng ra, đảm bảo rằng nó nằm trong phần hiển thị của cha mẹ, sau đó lặp lại tương tự cho cha mẹ, v.v. cách cho đến khi bạn đạt đến đỉnh.

Một bước của điều 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 Edge):

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

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

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

Bạn có thể sử dụng phương thức Element.scrollIntoView() như đã đề cập ở trên. Nếu bạn để nó không có tham số bên trong, bạn sẽ có cuộn xấu xí tức thì . Để ngăn chặn đ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-plz bằng div hoặc phần tử của bạn trên trang web. Và nếu bạn thấy phần tử của mình ở dưới cùng của 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".

Ghi 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/Euity/scrollIntoView

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

6
Smelino

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 của JQuery rất hay nếu bạn muốn cuộn trơn tru - tôi chưa từng thấy điều đó trước đây.

5
Chuck

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

4
Bloodhound

Tài sản bạn cần là location.hash. Ví dụ:

[.__.] location.hash = 'top'; // sẽ nhảy đến neo được đặt tên "top

Tôi không biết làm thế nào để tạo hiệu ứng cuộn Nice mà không cần sử dụng võ đường hoặc bộ công cụ nào đó như thế, nhưng nếu bạn chỉ cần nó để nhảy đến một cái neo, location.hash nên làm điều đó.

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

4
Scott Swezey

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'});"
3
funnyfish

Để 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;
      }
    }
  });
0
Swarnendu Paul

Cá nhân tôi thấy câu trả lời dựa trên jQuery của Josh ở trên là tốt nhất 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 một mục đích đó.

Chúc mừng!

EDIT: 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 chỉ bên dưới của tôi (không chắc chắn nếu vẫn ở dưới tôi sau khi chỉnh sửa) mà nói là sử dụng:

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

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

0
Lelando

Có một jQuery plugin cho trường hợp chung là cuộn đến một 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 sẽ khuyên bạn nên thực hiện 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. Cuộn đến vị trí đó.

quirksmode đưa ra một 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 chuyển từ null thành 0, không đúng nghi thức 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));
}

Voila!

0
Andrey Fedorov

scrollTop (IIRC) là nơi trong tài liệu, phần trên cùng của trang được cuộn đến. cuộn Để 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 tắt màn hình và cuộn 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ó xuống một lượng thiết lập cứ sau vài giây cho đến khi bạn muốn.

Điều này sẽ chỉ cho bạn đi đúng hướng.

Bổ sung: Tôi xin lỗi, tôi nghĩ rằng bạn muốn có 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) 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ả đó.

0
Benjamin Autin