Materialize – 具有巨大内容的可折叠不会滚动到选项卡的顶部

我使用物化框架提供的可折叠组件 。 我得到一个错误，不知道如何解决它或找到一个解决方法。 如果一个选项卡的内容太大，当我打开选项卡时，它不会滚动到选项卡本身的顶部（它会转到中间）。

你可以在这里试试： https ： //jsfiddle.net/r8314ouq/ 。 打开第一个选项卡，然后打开第三个选项卡，您将看到它不会滚动到选项卡的开始。

我知道了 但我想看看 这非常烦人，因为用户必须滚动才能看到所有内容。

我按照文档创建了我的可折叠：

 
 
filter_dramaFirst
 
Lorem ipsum dolor sit amet.
 
 
 
placeSecond
 
Lorem ipsum dolor sit amet.
 
 
 
whatshotThird
 
Lorem ipsum dolor sit amet.
 
  

我试图捕捉事件并滚动到但它没有用。 有任何想法吗？

Answer 1

因此，在使用能力方面，由于手风琴效果的工作方式有一定的延迟，但这是一种使这项工作的方法。

 $('.collapsible').collapsible({ accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style }); $('.collapsible .collapsible-header').on('click', function(event) { var target = $(this); setTimeout(function() { if( target.length ) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 500); } }, 300); }); 

这是你的JSFiddle修改工作

500是滚动效果的半秒动画，同时300是大约0.3秒的延迟以允许手风琴折叠，否则它在事件发射点（点击）滚动到标题位置，这是关于在文本的中间部分（在已经打开的手风琴部分下方打开标题时）。

Answer 2

除了@JokerDan的答案，这只会滚动到相应的.collapsible-header ，而不是 ：

• 第一个li元素，
• .collapsible-body高度低于所需的高度

_

 $('.collapsible').collapsible({ accordion : false }).on('click.collapse', 'li > .collapsible-header', function(e) { var $this = $(e.currentTarget), //or $(this) $body = $this.siblings('.collapsible-body'), $parent = $this.parent(), //Change this to your desired max height //of one .collabsible-body maxHeight = 700 //Wait for slide animation to complete //which is 350ms setTimeout(function(){ if ($parent.is(':first-child')) return if ($body.height() > maxHeight) $('html, body').animate({ scrollTop: $this.offset().top }, 500) }, 350) }); 

这是小提琴 。 （ 全景 ）

 $('.collapsible').collapsible({ accordion : false }).on('click.collapse', 'li > .collapsible-header', function(e) { var $this = $(e.currentTarget), //or $(this) $body = $this.siblings('.collapsible-body'), $parent = $this.parent(), //Change this to your desired max height //of one .collabsible-body maxHeight = 700 //Wait for slide animation to complete //which is 350ms setTimeout(function(){ if ($parent.is(':first-child')) return if ($body.height() > maxHeight) $('html, body').animate({ scrollTop: $this.offset().top }, 500) }, 350) }); 

 body { } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v11/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } 

  
 
 
filter_dramaFirst
 
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla. Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor. Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat. Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla. Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor. Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat. Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.
 
 
 
placeSecond
 
 Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.t.
 
 
 
whatshotThird
 
Lorem ipsum dolor sitLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla. Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor. Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat. Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla. Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor. Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla. Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor. Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat. Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.sectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat. Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit. amet.