Di chuyển đến nội dung sau khi Thỏa thuận Bootstrap được mở

Question

Tôi có một Accordion Bootstrap có nhiều bảng trong đó. Vấn đề tôi đang gặp phải là nếu bảng điều khiển mở ra khỏi trang, người dùng không có ý tưởng rằng bảng điều khiển đang mở và họ có thể cuộn xuống đến nó.

Để giải quyết vấn đề này, tôi muốn có thể cuộn đến nội dung hiện đang mở để họ biết rằng nội dung đang mở và nó lưu chúng khỏi cuộn đến nội dung đó.

Dường như tôi đang gặp sự cố khi cố gắng thực hiện điều này.

Đây là những gì chức năng của tôi trông giống như

$('.accLink').on('click', function(){ 
    if($(this).parent().next('.panel-collapse').hasClass('in')){ 

    }else{ 
    //This is where the scroll would happen 
    } 
}); 

cho đến nay tôi đã cố gắng ...

$('html, body').animate({ 
    scrollTop: ($(this).parent().next('.panel-collapse')) 
    },500); 

và

$('div').animate({ 
    scrollTop: ($(this).parent().next('.panel-collapse')) 
    },500); 

Tôi cũng đã thử một cái gì đó như thế này .. .

function scrollToElement(ele) { 
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left); 
} 

var element = $(this).parent().next('.panel-collapse').attr('id'); 
scrollToElement($('#'+element)); 

nhưng không làm gì cả với trang. nó chỉ ngồi đó. Bất kỳ trợ giúp sẽ được đánh giá cao!

Answer 1

Thay vì một người biết lắng nghe sự kiện nhấp chuột riêng, sử dụng built-in kiện callback Bootstrap của:

$("#accordion").on("shown.bs.collapse", function() { 
    var myEl = $(this).find('.collapse.in'); 

    $('html, body').animate({ 
     scrollTop: $(myEl).offset().top 
    }, 500); 
}); 

Hoặc, nếu bạn muốn tiêu đề để hiển thị:

$("#accordion").on("shown.bs.collapse", function() { 
    var myEl = $(this).find('.collapse.in').prev('.panel-heading'); 

    $('html, body').animate({ 
     scrollTop: $(myEl).offset().top 
    }, 500); 
});