jQuery: di chuyển cửa sổ khung nhìn để hiển thị tươi toggled yếu tố

Question

Tôi có một đoạn jQuery trong doc sẵn sàng mà Toggles một div chứa một textarea:

$('div#addnote-area').hide(); // hide the div 
$('a#addnote-link').click(function() { // click event listener on link 
    $('div#addnote-area').toggle(); // toggle the hidden div 
}); 

Các chuyển đổi hoạt động tốt khi nhấn vào liên kết. Vấn đề tôi gặp phải là nếu div#addnote-area ở dưới chế độ xem hiện tại của trình duyệt, nó vẫn ở đó khi được hiển thị. Tôi muốn con trỏ của người dùng đi đến vùng văn bản và toàn bộ vùng văn bản có thể xem được trong cửa sổ.

Click here to see an image http://i50.tinypic.com/5ousuv.png

Answer 1

Kiểm tra scrollTo jQuery plugin. Bạn chỉ có thể làm một cái gì đó như thế này:

$.scrollTo('div#addnote-area'); 

Hoặc, nếu bạn muốn animate nó, cung cấp # mili giây cho di chuyển để kéo dài:

$.scrollTo('div#addnote-area', 500); 

Answer 2

jQuery scrollTop cũng làm việc. Thử cài đặt như:

$('#idOfElement').css('scrollTop', 10) 

Bạn có thể nhận chiều cao/chiều rộng khá dễ dàng bằng cách sử dụng $(...).offset().

Answer 3

Without plugin scrollTo

$(window).scrollTop($('div#addnote-area').offset().top) 

EDIT: Vâng, tôi chắc chắn nhận được rất nhiều điểm từ câu trả lời cũ này :)

Dưới đây là một tiền thưởng, điều này cũng có thể được hoạt hình.

Chỉ cần sử dụng animate() chức năng và nhắm mục tiêu thẻ nội dung:

$('body').animate({scrollTop:$('div#addnote-area').offset().top},500)

Thử nó trên Stackoverflow! Mở bảng điều khiển thanh tra và chạy

$('body').animate({scrollTop:$('#footer').offset().top},500)