Làm thế nào để cuộn đến một phần tử trong jQuery?


67
27
Đỗ Minh Hùng
11 năm trước

Tôi đã thực hiện đoạn mã sau trong JavaScript để tập trung vào phần tử cụ thể (nhánh1 là một phần tử),

document.location.href="#branch1";

Nhưng vì tôi cũng đang sử dụng jQuery trong ứng dụng web của mình, vì vậy tôi muốn thực hiện đoạn mã trên trong jQuery. Tôi đã thử nhưng không biết tại sao nó không hoạt động,

$("#branch1").focus();

Mã jquery (tập trung ()) ở trên không hoạt động cho div, trong khi Nếu tôi đang thử cùng mã với hộp văn bản, thì nó hoạt động,

Xin vui lòng cho tôi biết, làm thế nào tôi có thể tập trung vào một el elnt bằng cách sử dụng jQuery?

Cảm ơn!

Hữu ích 67 Yêu thích 27 Chia sẻ Viết bình luận 0
Không hữu ích

8 Trả lời


32
Lý Tuấn Long
11 năm trước

Kiểm tra jQuery.ScrollTo , tôi nghĩ đó là hành vi mà bạn muốn, hãy kiểm tra bản demo .

Hữu ích 32 Trả lời hay nhất Chia sẻ Viết bình luận 4
Không hữu ích

Liên kết lỗi thời và không thực sự là jQuery, nhưng là một plugin jQuery.

Hữu ích 3 · Không hữu ích · Trả lời 0

Câu trả lời này bật lên đầu tiên Google. Tính đến việc xây dựng mới jQuery mới, mới, URL đúng là plugins.jquery.com/scrollto

Hữu ích 2 · Không hữu ích · Trả lời 0

Ngay cả địa chỉ đó đã lỗi thời. Repo Github của tác giả có tại github.com/flesler/jquery.scrollTo

Hữu ích 2 · Không hữu ích · Trả lời 0

Ya, tôi đang kiểm tra nó. Cảm ơn

Hữu ích 0 · Không hữu ích · Trả lời 0

109
Dương Uyên Thi
10 năm trước

Đối với vấn đề của tôi, mã này đã hoạt động, tôi phải điều hướng đến một thẻ neo khi tải trang:

$(window).scrollTop($('a#captchaAnchor').position().top);

Đối với vấn đề đó, bạn có thể sử dụng điều này trên bất kỳ yếu tố nào, không chỉ là thẻ neo.

Hữu ích 109 Chia sẻ Viết bình luận 2
Không hữu ích

Thay vì "$ (this) .scrollTop", bạn nên sử dụng "$ (window) .scrollTop". Hoạt động đầu tiên duy nhất khi "điều này" xảy ra giống như "cửa sổ".

Hữu ích 8 · Không hữu ích · Trả lời 0

Vâng Tôi chỉ chỉnh sửa câu trả lời.

Hữu ích 0 · Không hữu ích · Trả lời 0

50
Dương Cao Sơn
10 năm trước

Giống như @ user293153 Tôi chỉ mới phát hiện ra câu hỏi này và nó dường như không được trả lời chính xác.

Câu trả lời của anh ấy là tốt nhất. Nhưng bạn cũng có thể làm động với yếu tố này.

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
Hữu ích 50 Chia sẻ Viết bình luận 3
Không hữu ích

nếu bạn đang sử dụng nó bên trong .live ('click') và bạn nhận thấy cửa sổ nhảy lên đầu trang, hãy thêm "return false" làm câu lệnh cuối cùng, nó sẽ giải quyết vấn đề cho IE và Chrome: D

Hữu ích 2 · Không hữu ích · Trả lời 0

Lưu ý rằng mặc dù có vẻ như "html" sẽ không cần thiết trong bộ chọn, Firefox sẽ không thực hiện cuộn mà không có nó. Vì vậy, $ ('html, body') hoạt động, $ ('body') không hoạt động (chỉ FF, trong IE và Chrome, nó hoạt động tốt).

Hữu ích 2 · Không hữu ích · Trả lời 0

tuyệt vời. nó không cần plugin.

Hữu ích 0 · Không hữu ích · Trả lời 0

37
Võ Hương Giang
9 năm trước

Bạn có thể mở rộng các chức năng của jQuery như thế này:

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

và sau đó:

$('...').scrollToMe();

dễ dàng ;-)

Hữu ích 37 Chia sẻ Viết bình luận 5
Không hữu ích

Đó là giải pháp tốt nhất, tôi nghĩ vậy. Chỉ cần thêm một lần và sau đó quên nó đi ... :-)

Hữu ích 0 · Không hữu ích · Trả lời 0

Giải pháp rất hay. Loại giải pháp này sẽ vượt ra ngoài câu hỏi OP và viết tắt một loạt mã của tôi.

Hữu ích 0 · Không hữu ích · Trả lời 0

Làm thế nào bạn có thể làm cho nó hoạt động từ bên trong một div?

Hữu ích 0 · Không hữu ích · Trả lời 0

@Oudin Tôi biết điều này chậm phản hồi, nhưng thay thế 'html,body'bằng '.scrollable-container'và sau đó thêm scrollable-container' to the list of classes on your div. You could also add a parameter to scrollToMe`, nó sẽ lấy bất kỳ bộ chọn cụ thể nào bạn muốn làm cha mẹ thay thế.

Hữu ích 0 · Không hữu ích · Trả lời 0

cảm ơn đó là một câu trả lời tuyệt vời Tôi không cần hoạt hình, vì vậy tôi mới làmscrollToMe: function () { var x = jQuery(this).offset().top - 100; $('html').scrollTop(x); }});

Hữu ích 0 · Không hữu ích · Trả lời 0

4
Phan Nam Hưng
7 năm trước

Kiểm tra jquery-scrollintoview .

ScrollTo vẫn ổn, nhưng đôi khi bạn chỉ muốn đảm bảo rằng một thành phần UI được hiển thị, không nhất thiết phải ở trên cùng. ScrollTo không giúp bạn điều này. Từ README của scrollintoview:

Plugin này giải quyết vấn đề trải nghiệm người dùng như thế nào

Plugin này cuộn một yếu tố cụ thể vào chế độ xem tương tự như chức năng tích hợp trong trình duyệt (chức năng scrollIntoView () của DOM), nhưng hoạt động khác nhau (và có thể thân thiện với người dùng hơn):

  • nó chỉ cuộn đến phần tử khi phần tử thực sự nằm ngoài tầm nhìn; nếu phần tử nằm trong chế độ xem (bất kỳ nơi nào trong vùng tài liệu hiển thị), sẽ không thực hiện cuộn;
  • nó cuộn bằng các hiệu ứng hoạt hình; khi cuộn được thực hiện, người dùng biết chính xác họ không được chuyển hướng ở bất cứ đâu, nhưng thực sự thấy rằng họ chỉ đơn giản là di chuyển đến một nơi khác trong cùng một trang (cũng như họ đã di chuyển theo hướng nào);
  • luôn có lượng cuộn nhỏ nhất được áp dụng; khi phần tử nằm trên vùng tài liệu hiển thị, nó sẽ được cuộn lên trên cùng của vùng nhìn thấy; khi phần tử ở dưới mức nhìn thấy được, nó sẽ được cuộn xuống dưới cùng của vùng nhìn thấy; đây là cách cuộn nhất quán nhất - khi cuộn sẽ luôn ở trên cùng, đôi khi không thể cuộn một phần tử lên trên cùng khi nó ở gần đáy của hộp chứa cuộn (do đó việc cuộn sẽ không thể đoán trước được);
  • khi kích thước của phần tử vượt quá kích thước của vùng tài liệu hiển thị, góc trên cùng bên trái của nó là góc sẽ được cuộn đến;
Hữu ích 4 Chia sẻ Viết bình luận 0
Không hữu ích

2
Bùi Khánh Bình
4 năm trước

Sử dụng

$ (cửa sổ) .scrollTop ()

Nó sẽ cuộn cửa sổ vào mục.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);
Hữu ích 2 Chia sẻ Viết bình luận 1
Không hữu ích

Vui lòng không thêm cùng một câu trả lời cho nhiều câu hỏi . Trả lời câu hỏi hay nhất và đánh dấu phần còn lại là trùng lặp, một khi bạn kiếm đủ danh tiếng. Nếu nó không phải là một bản sao, chỉnh sửa câu trả lời và điều chỉnh bài đăng cho câu hỏi.

Hữu ích 0 · Không hữu ích · Trả lời 0

1
Huỳnh Song Khuê
11 năm trước

Tôi nghĩ rằng bạn có thể đang tìm kiếm một "mỏ neo" cho ví dụ bạn có.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

Phương thức jQuery tập trung thực hiện một cái gì đó khác với những gì bạn đang cố gắng đạt được.

Hữu ích 1 Chia sẻ Viết bình luận 1
Không hữu ích

Ya tôi đang cố gắng để đạt được nhiệm vụ neo tương tự. Ok, nếu trọng tâm không thể làm điều đó, có phương pháp nào khác trong jquery có thể làm điều này không?

Hữu ích 0 · Không hữu ích · Trả lời 0

0
Lý Trà My
8 năm trước

Để hàm Focus () hoạt động trên phần tử, div cần có thuộc tính tabindex. Điều này có thể không được thực hiện theo mặc định trên loại phần tử này vì nó không phải là một trường đầu vào. Bạn có thể thêm một tabindex chẳng hạn tại -1 để ngăn người dùng sử dụng tab để tập trung vào nó. Nếu bạn sử dụng tabindex tích cực, người dùng sẽ có thể sử dụng tab để tập trung vào phần tử div.

Dưới đây là một ví dụ: http://jsfiddle.net/klodder/gFPQL/

Tuy nhiên, tabindex không được hỗ trợ trong Safari.

Hữu ích 0 Chia sẻ Viết bình luận 0
Không hữu ích

Trả lời của bạn

Xem trước nội dung