jQuery - Di chuyển phần tử vào giữa màn hình thay vì lên trên cùng với liên kết anchor

Question

Tôi đang tạo trang một trang với thanh điều hướng định vị cố định, cuộn trơn tru đến các phần tử khác nhau thông qua liên kết anchor. Hành vi mặc định để cuộn đến một phần tử là căn chỉnh nó với đầu cửa sổ trình duyệt. Thay vào đó, tôi muốn căn chỉnh phần tử ở giữa màn hình.

tôi sử dụng đánh dấu này để điều hướng:

<nav class="main-nav"> 
    <a href="#top">Top</a> 
    <a href="#section-1">Section 1</a> 
    <a href="#section-2">Section 2</a> 
    <a href="#section-3">Section 3</a> 
    <a href="#section-4">Section 4</a> 
    <a href="#section-5">Section 5</a> 
</nav> 

tôi sử dụng kswedberg's jQuery Smooth Scroll plugin làm mịn cuộn. Tôi bắt đầu nó như thế này:

$('.main-nav a').smoothScroll({ 
    offset: 0, 
    speed: 700 
}); 

tôi muốn thiết lập bù đắp được ((window).height/2) - (element height/2) để nó theo chiều dọc làm trung tâm, nhưng tôi cần sự giúp đỡ để tìm ra cách để thực hiện nó đúng cách.

tôi cần nó để:

• Lấy chiều cao của cửa sổ và chia bởi hai
• Lấy chiều cao của nguyên tố này và chia bởi hai
• Trừ cựu từ sau
• Nếu có thể, căn chỉnh nó lên trên cùng theo mặc định nếu phần tử cao hơn cửa sổ

Vì có rất nhiều hoặc liên kết Tôi giả sử tôi hoặc cần phải kiểm tra chiều cao của phần tử liên kết anchor đã được nhấp vào liên kết, hoặc khởi tạo smoothScroll cho mỗi liên kết anchor.

Có ai biết cách thực hiện việc này không?

Answer 1

API cung cấp cách để thực hiện smoothScroll không bị ràng buộc với yếu tố. Bạn sẽ muốn thực hiện phương thức này bên trong sự kiện onclick cho các thẻ neo để bạn có thể truy cập vào mục tiêu của nó. Sau đó, bạn có thể tính toán những gì bạn cần để có được vị trí mong muốn. Vì offset bây giờ là một độ lệch tuyệt đối thay vì bù đắp tương đối, bạn sẽ cần phải có được vị trí chính xác để cuộn đến.

$('.main-nav a').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 

    $.smoothScroll({ speed: 700 }, offset); 
    return false; 
}); 

Answer 2

Dưới đây là làm thế nào để làm điều đó với đồng bằng JQuery sử dụng scrollTo()

$('.main-nav a').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 
    var speed = 700; 
    $('html, body').animate({scrollTop:offset}, speed); 
}); 

Đây là một sự kết hợp của mã Straker và mã từ câu hỏi này: jQuery scrollTo - Center Div in Window Vertically