Làm cách nào để cuộn một cách có lập trình một div bằng các thanh cuộn của chính nó?

Question

Tôi có trang HTML có DIV nội bộ được sử dụng cho nội dung. DIV bên trong có thanh cuộn riêng. Tôi muốn tự động cuộn đến một vị trí nhất định trong DIV.

Tôi làm cách nào để thực hiện việc này? (Lưu ý rằng tôi không muốn tự động cuộn thanh cuộn Window - Tôi đã biết làm thế nào để làm điều này)

Một giải pháp đa nền tảng cần thiết

Answer 1

Các div có một tài sản mà bạn có thể thiết lập scrollTop (và bạn thân của mình , scrollLeft).

• jsFiddle Demo

• scrollTop on MDN

• scrollLeft on MDN

Answer 2

có .scrollTo() phương pháp này có thể giúp bạn di chuyển qua các div của bạn. thử nó để biết thêm thăm here

Answer 3

Thêm một div (nơi bạn muốn di chuyển):

<div id="#scroll-here">Test..</div> 

và thêm một liên kết như thế này:

<a href="#scroll-here">Scroll to Test</a> 

nếu bạn muốn có một cuộn mịn bạn có thể kiểm tra this

Answer 4

Miễn là JavaScript được chấp nhận, tôi đã tạo demo using jQuery sử dụng yếu tố đã biết có ID trong số div.

$(function() { 
    var testOffset = $('#test').offset(), 
     scrollOffset = $('#scroll').offset(); 
    $('#scroll').scrollTop(testOffset.top - scrollOffset.top); 
});​ 

Nếu bạn chỉ biết làm thế nào đến nay, về mặt pixel, chứ không phải là một yếu tố cụ thể, nó có thể được điều chỉnh để:

$(function() { 
    $('#scroll').scrollTop(100); 
});​ 

Answer 5

tôi sẽ khuyên bạn nên có một cái nhìn tại các scrollTo jQuery plugin. Đó là một plugin thực sự tiện dụng cho phép bạn tạo hiệu ứng động trong một phần tử bất kỳ. Tôi đã thiết lập một ví dụ nhỏ trong jsFiddle minh họa cách hoạt động của nó. Ví dụ cho thấy cách bạn "cuộn đến" thứ ba p trong div đầu tiên và sau đó là p thứ hai ở số div thứ hai. Một điều đáng chú ý, là để đảm bảo rằng position().top là chính xác, bạn sẽ cần phải đặt số có chứa div để có một position: relative;. Hy vọng rằng đây không phải là quá nhiều của một vấn đề mặc dù. :)