Di chuyển động đến ID khi tải trang

Question

Im tring để 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à đã xem xét đ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 ảnh ở đầu trang?

HTML (đó là nửa đường xuống trang) chỉ đơn giản là:

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

Answer 1

Bạn chỉ được di chuyển chiều cao của nguyên tố của bạn. offset() trả về tọa độ của một yếu tố liên quan đến các tài liệu, và top param sẽ cung cấp cho bạn khoảng cách của phần tử 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 sự chậm trễ với nó:

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

Answer 2

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à. Kiểm tra this link.

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

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

Answer 3

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

jquery-animate-body-for-all-browsers.

Answer 4

hãy thử với mã sau. làm cho các yếu tố với tên lớp trang-di chuyển và giữ tên id để href cá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(); 
    }); 

Answer 5

giải pháp javascript tinh khiết với scrollIntoView() chức năng:

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

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

T.B. thông số 'mịn' hiện hoạt động từ Chrome 61 dưới dạng julien_c được đề cập trong các nhận xét.