scrolltop trong một div không hoạt động trong jquery

Question

Tôi muốn để animate scrolltop với trong một div khi tôi động cơ thể di chuyển nó đang làm việc tốt cho tôi

Nhưng khi tôi đang sử dụng nó với một div đó là thất bại.

này tốt đang làm việc cho tôi http://jsfiddle.net/yazaLyxs/

$('body').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

Vậy tại sao mã này không hoạt động?

$('.myClass').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

http://jsfiddle.net/qVWuv/198/

Answer 1

OK vì không có ai trả lời chính xác về tất cả về những gì:

.position().top không đưa vào tài khoản ký quỹ của một nguyên tố.jsFiddle demo

---

ví dụ đầu tiên của bạn có thể làm việc trong Chrome, nhưng không phải trong Firefox, nguyên nhân của sự khác biệt nhỏ trong documentElement.

Để giải thích cho nó, bạn sẽ phải sử dụng:

$('html, body').animate({ 

Bây giờ, chúng ta hãy xem sự khác biệt giữa phương pháp .position() và .offset():

.position()

Lấy hiện tại tọa độ của phần tử đầu tiên trong tập hợp các phần tử đã so khớp, liên quan đến phần tử gốc.

.offset()

Lấy tọa độ hiện tại của phần tử đầu tiên, hoặc thiết lập tọa độ của mỗi yếu tố, trong tập hợp các yếu tố phù hợp, liên quan đến tài liệu.

nếu ở trên là rõ ràng, và bạn muốn để có được nội child yếu tố vị trí bên cha mẹ vị trí ^*, bạn sẽ cần phải sử dụng .position().

#parent { 
    height: 300px; 
    background: teal; 
    margin: 500px 0 0 0; 
    overflow:scroll; 
    position:relative; /* NEEDED! */ 
} 

Bây giờ, bạn có thể thiết lập lề yếu tố của nội tâm để 500px nhưng nó top vị trí vẫn là 0 px!

console.log($('#child').position().top); // 0 

do đó bạn cần phải thiết lập một phong cách top: (thay vì margin) và position: tới phần tử #save để sử dụng $('#child').position().top: http://jsfiddle.net/RokoCB/qVWuv/203/(hoặc ít nhất là đặt một số yếu tố khác trước khi nó hoặc một số nội dung).

_{* Nếu bạn không đặt thuộc tính CSS "position:" thành phần tử cha bạn cần trừ vị trí trên cùng hoặc bù trừ của vị trí gốc.}

Answer 2

nếu trong html

<div class="myClass"> 
    <label></label> 
    <label id="myId">target Label</label> 
</div> 

và trong css

div{ 
    height: 100px; 
    width: 100px; 
    overflow: auto; 
} 

trong js

$('.myClass').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

tất cả mọi thứ nên làm việc .. Jsfiddle

Answer 3

$('body').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

này làm việc tốt becauase bạn thiết div tại margin-top: 500px; làm cho cuộn dọc thành hình ảnh trên cơ thể. Vì vậy, bạn cần một phần tử DOM có đủ chiều cao để có được một cuộn dọc, xin lưu ý yếu tố này là phần tử cha mẹ không phải là phần tử mục tiêu, tức là thẻ chứa div của bạn.

Kiểm tra này Jsfiddle Demo