如何解决单击时手风琴滚动到顶部?
我有这些可以打开和关闭的手风琴。我还希望手风琴在点击时滚动到页面顶部。
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);
});
解决方法
所以,我认为你可以改变你的方法。
考虑到您使用的是 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。