Cuộn animate để ID khi tải trang

123

Tôi đang cố gắng tạo hiệu ứng cuộn cho một ID cụ thể khi tải trang. Tôi đã thực hiện rất nhiều nghiên cứu và tìm thấy điều này:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

Nhưng điều này dường như bắt đầu từ ID và hoạt hình lên đầu trang?

HTML (nằm ở nửa trang) chỉ đơn giản là:

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— Adi
nguồn

1

Đây không phải là nhiều câu trả lời, nhưng tôi đánh giá cao plugin "scrollTo" của Ariel Flesler; nó có rất nhiều tính năng để xoay quanh một trang và một vài phần mở rộng cho plugin cho các trường hợp phổ biến (ví dụ: bạn có thể thấy plugin "LocalScroll" của mình hữu ích để cuộn đến một liên kết href nếu nó trên cùng một trang). Bạn có thể tải plugin tại đây: flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

Bạn chỉ cuộn chiều cao của yếu tố của bạn. offset () trả về tọa độ của một phần tử so với tài liệu và topparam sẽ cung cấp cho bạn khoảng cách của phần tử tính bằng pixel dọc theo trục y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

Và bạn cũng có thể thêm một độ trễ cho nó:

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

— BumbleB2na
nguồn

1

Điều gì về cuộn tự động khiến tôi đi "WOW COOL !!"? Có lẽ đó là sự đơn giản trong giải pháp của bạn.

— theblang

Tôi cần cuộn một phần tử vào chế độ xem khi tải trang, nhưng có hai vấn đề: a) sử dụng "html, body" đã đưa ra hai cuộc gọi lại (một cho mỗi phần tử phù hợp). b) Nó phụ thuộc vào trình duyệt mà phần thân hoặc html hoạt động. Vì vậy, tôi đã tạo ra một ý chính mà bạn có thể điều chỉnh để sử dụng trong dự án của mình để đảm bảo chế độ xem cuộn hoạt động trên trình duyệt "bất kỳ" và bạn sẽ chỉ nhận được một cuộc gọi lại khi hoạt hình kết thúc. gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

Điều này không thực sự chính xác. Bạn thực sự nên xem xét vị trí cuộn hiện tại của cơ thể hoặc yếu tố mà chúng tôi đang cố gắng scroll. Với ý nghĩ đó bạn sẽ thêm vị trí cuộn hiện tại của bodyvào offset().topvị trí của phần tử chúng ta muốn theo quan điểm, Tổng kết quả là giá trị chúng ta muốn di chuyển đến. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg bạn đã thử chưa? Nếu vị trí cuộn hiện tại là bất cứ thứ gì trên giá trị 0 thì những gì bạn đề xuất có thể không hoạt động. Giả sử thùng chứa có thể cuộn cao 1000 pixel và vị trí cuộn hiện tại là 1000. Giả sử phần tử bạn đang di chuyển nằm ở trung tâm dọc ở 500. Tôi nghĩ rằng những gì bạn đề xuất sẽ cho nó cuộn đến 1500 , đúng?

— BumbleB2na

@ BumbleB2na .offset().topsẽ cung cấp cho bạn một số âm trong trường hợp này. Và điều này thực sự chỉ hoạt động cho bodyvà htmlvì offset().topnó sẽ cung cấp cho bạn phần bù trên cùng của tài liệu, không phải là phần gốc cuộn dự định.

— mattdevio

12

Giải pháp javascript thuần túy với chức năng scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

Mở rộng đoạn trích

Thông số PS 'smooth' hiện hoạt động từ Chrome 61 như julien_c được đề cập trong các nhận xét.

— Vladimir Vovk
nguồn

1

Hoạt động ngay bây giờ (từ Chrome 61)

— julien_c

Hãy chắc chắn kiểm tra khả năng tương thích của trình duyệt. Trong 10/2018 IE (11), Edge và Safari hỗ trợ "scrollIntoView" nhưng không phải là tùy chọn "mượt".

— kim loại_jacke1

JS thuần túy ftw. Cảm ơn vì đoạn trích đó! Mịn màng như kem bơ đôi

— jean d'arme

4

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-all-browser .

— Màu xám AleX
nguồn

3

Có một plugin jquery cho việc này. Nó cuộn tài liệu đến một yếu tố cụ thể, để nó sẽ hoàn hảo ở giữa chế độ xem. Nó cũng hỗ trợ giảm bớt hiệu ứng hoạt hình để hiệu ứng cuộn trông cực kỳ mượt mà. Kiểm tra liên kết này .

Trong trường hợp của bạn, mã là

$("#title1").animatedScroll({easing: "easeOutExpo"});

— Eugene Tiurin
nguồn

"Nó cũng hỗ trợ giảm bớt hiệu ứng hoạt hình để hiệu ứng cuộn trông cực kỳ mượt mà" Thật không may, điều đó không đúng. Nếu máy tính bị chậm vì một số lý do, nó chỉ tiếp tục nhảy mà không thực sự di chuyển đúng cách.

— brunoais

Cuộn mượt mà đòi hỏi rất nhiều pixel để tính toán. Chắc chắn một "máy tính" chậm (nhiều GPU) không thể làm điều này nhưng do thiếu đủ ALU. Vì vậy, nói chung anh ấy đúng. Và lib thực sự dễ dàng di chuyển.

— Roland

1

thử với mã sau đây. tạo các phần tử với cuộn trang tên lớp và giữ tên id cho hrefcác liên kết tương ứng

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— Akhil
nguồn

-3

cho Scroll đơn giản, sử dụng kiểu sau

chiều cao: 200px; tràn: cuộn;

và sử dụng lớp phong cách này mà div hoặc phần bạn muốn hiển thị cuộn

— mm
nguồn