jQuery animate scroll

Tôi không chắc chắn làm thế nào để gọi hiệu ứng, nhưng ai đó có thể chỉ cho tôi vào một thư viện có thể giúp tôi thực hiện tác dụng tương tự như trang web này?jQuery animate scroll

http://www.makr.com

Về cơ bản, nó di chuyển lên dòng trên cùng của trang trên click chuột. Đoạn mã, tốt nhất là jQuery, có thể trợ giúp, nếu không có thư viện hiệu ứng chuyên biệt nào cho nó.

Tôi không chắc liệu mình có cần bắt đầu một chủ đề khác không, nhưng có ai có thể giúp tôi với đoạn mã jQuery nhỏ để đạt được toàn bộ hiệu ứng của giao diện người dùng Makr không?

Nguồn

2011-11-08 Marvzz

Im không chắc chắn nếu tôi cần phải bắt đầu một chủ đề khác, nhưng bất cứ ai có thể giúp tôi với một đoạn jQuery nhỏ để đạt được toàn bộ tác động của giao diện người dùng Makr ? – Marvzz

Tôi đã cho bạn một cái gì đó tốt để bắt đầu. Khi bạn nhấp vào một mục, hãy lấy giá trị bù trừ khỏi mục đó và cuộn đến phần bù với jQuery animate. – Mathieu

vâng tôi đã nhận chúng, tôi đã có thể cuộn chúng lên, nhưng tôi gặp sự cố với phần tiếp theo của hoạt ảnh của slideDown. tôi không thể hoàn toàn đạt được thời gian theo cách mà Makr làm. – Marvzz

192

Bạn có thể tạo hoạt ảnh cho thanh cuộn của trang bằng jQuery.

$('html, body').animate({ 
    scrollTop: $(".middle").offset().top 
}, 2000);

Xem trang web này: http://papermashup.com/jquery-page-scrolling/

Nguồn

2011-11-08 08:09:51 Mathieu

Tôi chỉ cần sử dụng '# (" body "). animate (...);' và nó hoạt động cho firefox , chrome và ie. Có trường hợp cụ thể nào để đính kèm hoạt ảnh vào đối tượng DOM 'html' không? – Daniel

Giá trị '$ ('. Giữa '). Offset(). Phần trên cùng là lấy giá trị bù đắp của đối tượng đó (lớp, id, ...), vì vậy trang biết chiều cao cần di chuyển đến. Nếu bạn muốn di chuyển đến một div nhất định được đặt nửa chừng trang, điều này có thể hữu ích. – Mathieu

+14

'$ ('html, body')' là dành cho khả năng tương thích ie8. –

Có một plugin jquery cho việc này. Nó cuộn tài liệu đến một phần tử cụ thể, để nó hoàn toàn nằm giữa khung nhìn. Nó cũng hỗ trợ hoạt hình dễ dàng để hiệu ứng cuộn trông siêu mượt mà. Hãy xem AnimatedScroll.js.

Nguồn

2013-08-12 21:32:03

Tôi sẽ tránh sử dụng plugin như thế này, khi câu trả lời thực được hỗ trợ nguyên bản. '$ ('html, body'). animate ({scrollTop: x}, t);' là rất chính xác, không cần phải thêm một plugin không cần thiết vào tab mạng của trang của bạn. – ChaseMoskal

Bạn hoàn toàn đúng, ngoại trừ việc plugin này có thể cuộn đến bất kỳ phần tử tài liệu nào, vì vậy nó sẽ chính xác ở giữa chế độ xem cửa sổ. –

Vấn đề là, điều đó vẫn thực sự dễ dàng mà không cần bất kỳ plugin nào. Nó chỉ là vấn đề di chuyển đến '($ e.offset(). Top + ($ e.height()/2)) - ($ (cửa sổ) .height()/2)', hoặc bằng tiếng Anh, '" elementCenter trừ halfViewportHeight "'. Đúng? – ChaseMoskal

Bạn cũng có thể thử một plugin jquery đơn giản (AnimateScroll) do tôi phát triển và được nhiều người đánh giá cao!

Nguồn

2013-09-06 05:06:38

Plugin tuyệt vời - không thể đợi để sử dụng nó! –

tôi chỉ sử dụng:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);

Nguồn

2015-08-19 17:00:05

bạn có thể giải thích bạn đang cố gắng làm gì với '- = -'?bạn đang cố gắng định kiểu số hay gì đó? – user151496

@ user151496 Hãy xem tài liệu của jQuery http://api.jquery.com/animate/ theo đoạn hiện đang bắt đầu "Thuộc tính hoạt ảnh cũng có thể là tương đối." Cũng giống như trong JS bạn có thể nói 'myVar + = 10' để thêm mười vào giá trị hiện tại, đoạn mã này về cơ bản là sử dụng phân tích cú pháp tùy chỉnh của jQuery để thực hiện mục tiêu tương tự:' scrollTop - = -yScrollValue'. Tôi không thể nói chắc chắn lý do tại sao OP ở đây đã chọn rằng trên một đơn giản hơn '{scrollTop: '+ =' + value}'. – natevw

@ user151496 đầu tiên '-' là giá trị giảm và thứ hai '-' nếu đáp ứng giá trị âm, chúng trở thành dương và ngược lại. :) –

Trả lời

Các vấn đề liên quan