jQuery Accordion - nó sẽ cuộn lên đầu mục mở?

Question

Với điều khiển accordion jQuery, làm thế nào tôi có thể di chuyển đến một mục tôi đã chọn khi nó tắt màn hình?

Thời gian:

• Tôi có một mục accordion với nội dung lớn hơn so với cửa sổ có thể xem
• tôi di chuyển xuống mục accordion thứ hai
• tôi nhấp vào mục accordion thứ hai để hiển thị nó
• Các tùy chọn accordion đầu tiên sụp đổ, và thứ hai mở ra, nhưng trượt ra khỏi màn hình.

Có tùy chọn cho accordion để cuộn đến mục thứ hai không?

Answer 1

Bạn có thể thử sử dụng scrollTo jQuery plugin. Nó cho phép bạn làm những việc như thế này:

$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view 
$('div#foo').('#bar'); // scroll within div#foo so #bar is in view 

Bind ScrollTo() sự kiện accordionactivate, như thế này:

$('#youraccordion').bind('accordionactivate', function(event, ui) { 
    /* In here, ui.newHeader = the newly active header as a jQ object 
       ui.newContent = the newly active content area */ 
    $(ui.newHeader).ScrollTo(); // or ui.newContent, if you prefer 
}); 

Khi nào sự kiện accordionactivate kích hoạt?

Đã kích hoạt sau khi bảng điều khiển đã được kích hoạt (sau khi hoạt ảnh hoàn tất). Nếu accordion trước đây đã bị sụp đổ, ui.oldHeader và ui.oldPanel sẽ là các đối tượng jQuery rỗng. Nếu accordion bị thu hẹp, ui.newHeader và ui.newPanel sẽ là các đối tượng jQuery rỗng.

Tài liệu tham khảo: jQuery UI Accordion

Answer 2

Hey đã có cùng một vấn đề. Dưới đây là những gì làm việc cho tôi ít nhất là những gì có vẻ là cách dễ nhất. Sử dụng plugin scrollTo.

<script type="text/javascript"> 
    $(function(){ 
     $('#youraccordionheader').click(function(){ 
      $.scrollTo(this)             
     }) 
    }); 
</script> 

Hy vọng nó có thể được sử dụng cho ai đó.

Answer 3

Tôi đã thực hiện câu trả lời đầu tiên và thích tùy chọn này tốt nhất vì đó là một chức năng cho tất cả các bảng điều khiển accordion. Nhưng, tôi nhận thấy rằng tôi giữ nhận được một lỗi khi cố gắng (lại) đóng bảng accordion cùng - nó sẽ ngăn chặn kịch bản tại dòng này trong các plugin ScrollTo:

attr[key] = val.slice && val.slice(-1) == '%' ? 

Các val được trở lại trống rỗng, vì vậy tôi tìm thấy một câu trả lời ở đây cho biết để kiểm tra xem nó có trống không và thêm/thay thế chức năng này - vì vậy nó hoạt động ngay bây giờ.

else{ 
var val = targ[pos]; 
// Handle percentage values 
if(val) { 
    attr[key] = val.slice && val.slice(-1) == '%' ? 
    parseFloat(val)/100 * max 
    : val; 
    } 
} 

Answer 4

Tôi gặp sự cố khi ràng buộc sự kiện khi bạn sử dụng chức năng bấm accordion để đóng. Chỉ cần thêm một câu lệnh if nếu nó cố định.

$('#accordion').bind('accordionchange', function(event, ui) { 
    if(!ui.newHeader.length) { return; } 
    /* In here, ui.newHeader = the newly active header as a jQ object 
       ui.newContent = the newly active content area */ 
    $.scrollTo(ui.newHeader); // or ui.newContent, if you prefer 
}); 

Answer 5

Tôi biết câu hỏi này cũ, nhưng không có câu nào ở trên hoạt động như mong muốn đối với tôi. Đây là cách tôi hoàn thành nó. Các -50 chỉ trong trường hợp này sẽ xuất hiện trong một iPad hoặc iPhone webapp để trang không di chuyển đầu của tiêu đề accordion phía sau thanh trạng thái.

$('#accordion').accordion({ 
    collapsible: true, 
    autoHeight: false, 
    animated: false 
}); 
$('.ui-accordion-header').bind('click',function(){ 
    theOffset = $(this).offset(); 
    $(window).scrollTop(theOffset.top - 50); 
}); 

Answer 6

Khi tôi muốn thu gọn là đúng, tôi đã thêm một phép thử để hủy lỗi của tất cả các mục bị thu gọn. Tôi cũng không muốn tiêu đề để được chính xác ở phía trên cùng của trang, vì vậy tôi hạ xuống vị trí scrollTop bởi 100:

$(document).ready(function() { 
    $(".ui-accordion").bind("accordionchange", function(event, ui) { 
     if ($(ui.newHeader).offset() != null) { 
     ui.newHeader, // $ object, activated header 
     $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500); 
     } 
    }); 
    }); 

Answer 7

Đơn giản chỉ cần sử dụng chức năng này trên window.load

$(function() { 
    var icons = { 
    header: "ui-icon-circle-plus", 
    activeHeader: "ui-icon-circle-minus" 
    }; 
    $("#accordion").accordion({ 
    icons: icons, autoHeight: false, collapsible: true, active: false, 
    activate: function(event, ui){ 
     var scrollTop = $(".accordion").scrollTop(); 
     var top = $(ui.newHeader).offset().top; 
    //do magic to scroll the user to the correct location 

    //works in IE, firefox chrome and safari 
     $("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast"); 
     }, 



    }); 

    }); 

perfectl wokring

Answer 8

Giải pháp từ Martin hoạt động tuyệt vời. Tuy nhiên khi bạn thêm mã này, nó sẽ cuộn lên đầu luôn, không có vấn đề nếu accordion của bạn có thể nhìn thấy trên trang hay không.

Nếu bạn muốn di chuyển đến đầu chỉ khi nội dung accordion của bạn lớn hơn so với cửa sổ có thể xem, sau đó sử dụng mã tiếp theo:

$(document).ready(function() { 

    function isScrolledIntoView(elem) 
    { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
    } 

    $(".accordion-inner").bind("accordionchange", function(event, ui) { 
     if ($(ui.newHeader).offset() != null) { 
     if (!isScrolledIntoView(ui.newHeader)) 
     { 
      ui.newHeader, // $ object, activated header 
      $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500); 
     } 
     } 
    }); 
    }); 

Answer 9

Nó làm việc cho tôi và thử nghiệm,

$("#accordion").accordion({ 
    heightStyle: "content", 
    collapsible: true, 
    active: false, 
    activate: function(event, ui) { 
     if(!$.isEmptyObject(ui.newHeader.offset())) { 
      $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow'); 
     } 
    } 
}); 

http://jsfiddle.net/ilyasnone/aqw613em/

Answer 10

Vui lòng tham khảo this trả lời bằng techfoobar

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300 // collapse will take 300ms 
    }); 
    $('#accordion h3').bind('click',function(){ 
     var self = this; 
     setTimeout(function() { 
      theOffset = $(self).offset(); 
      $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
     }, 310); // ensure the collapse animation is done 
    }); 
}); 

Nó làm việc cho tôi với sửa đổi ở trên.

$("#accordion").accordion({ 
        heightStyle: "content", 
        collapsible: true, 
        activate: function (event, ui) { 

         try 
         { 
          var self = this; 
          theOffset = $(self).offset(); 
          $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
         } catch (e) { 
          alert(e); 
         } 
        } 
       }); 

Answer 11

Đó là không cần thiết scrollTo plugin, bạn có thể làm điều đó:

$('.accordionNormalitzador').bind('accordionactivate', function(event, ui) { 
     $(ui.newHeader)[0].scrollIntoView(); 
    });