Question

我有这些可以打开和关闭的手风琴。我还希望手风琴在点击时滚动到页面顶部。

HTML：

<button class="accordion"><h2>Title</h></button>
<div class="panel">
<p>some text</p>
</div>

用于打开和关闭手风琴的 Javascript：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */

    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

我尝试添加 Javascript 以使其滚动到顶部，但它不起作用：

$('button').click(function() {  
  $(this).animate({    
      scrollTop:0              
  }, 1000);                    
});

Answer 1

所以，我认为你可以改变你的方法。

考虑到您使用的是 jQuery，您的 HTML 可以是这样的：

...
<div class="accordion">
  <div class="accordion-header">Your accordion header</div>
  <div class="accordion-content">Your Accordion Content</div>
</div>
...

你的 Javascript 像这样：

function scrollToElement($el, time = 500){
    $([document.documentElement, document.body]).animate({
    scrollTop: $el.offset().top
  }, time);
}

function setupAccordion(){
  $('.accordion .accordion-header').click(function(){
    let $parent = $(this).parent();
    $parent.toggleClass('active');
    scrollToElement($parent);
  });
}

$(document).ready(function(){
    setupAccordion();
});

你的 CSS 是这样的：

.accordion-header{
  border-bottom:1px solid #ccc;
  padding:1em;
  cursor:pointer;
  font-weight:bold;
}

.accordion-content{
  max-height:0;
  opacity:0;
  visibility:hidden;
  transition:all 0.2s ease;
  padding:0;
}

.accordion.active .accordion-content{
  max-height:500px;
  visibility:visible;
  opacity:1;
  padding:1em;
}

游乐场：https://jsfiddle.net/m0fbq2j4/

单击时手风琴滚动到顶部？

1 个答案: