我希望手风琴在打开时滚动页面。
这是代码，
<button class="accordion">Services We Offer</button>
<div class="panel">
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
<p>
<strong>PC Repairs</strong> - CCC Digital Solutions offers a PC repair
service. Users can enquire about prices for PC repairs and get rough
estimates on how much it will cost. Users will also find a FAQ guide on how
to attempt to repair their PC themselves. Click <a href= "pcRepairs.html"
title="PC Repairs" target="_blank">HERE</a> to go to the PC Repairs page.
<br />
<br />
<strong>Digital Graphics</strong> - CCC Digital Solutions offers a Digital
Graphics service. Users can enquire and get in contact about personal
graphics to be made or they can view tutorials on how to make graphics and
how to effectively use photoshop. Click <a href="digitalGraphics.html"
title="Digital Graphics" target="_blank">HERE</a> to go to the Digital
Graphics page.
<br />
<br />
<strong>Website Development</strong> - CCC Digital Solutions offers a
Website Development service. Users can view this page to find prices for
website development or they can find links to the W3Schools website which
will teach them basic and advanced website development. Click <a
href="websiteDevelopment.html" title="Website Development"
target="_blank">HERE</a> to go to the Website Development page.
<br />
<br />
<strong>Website Maintenance</strong> - CCC Digital Solutions offers a
Website Maintenance service. Users can view this page and find guides and
tips on how to maintain a website that has been created. Click <a
href="websiteMaintenance.html" title="Website Maintenance"
target="_blank">HERE</a> to go to the Website Maintenance page.
<br />
<br />
<strong>Training Courses</strong> - CCC Digital Solutions offers a Training
Courses service. Users can view this page and find out what courses are
available and what each course will roughly cost. Click <a
href="trainingCourses.html" title="Training Courses"
target="_blank">HERE</a> to go to the Training Courses page.
</p>
</div>
基本上，我有一个视差图像，当用户向下滚动页面时，手风琴会显示。当手风琴在页面底部打开时，它会与页面重叠，除非用户向下滚动，否则不会显示内容。
我希望手风琴能够自动滚动页面，以便用户可以看到内容。
CSS代码
.parallax {
/* The image used */
background-image: url("images/collegecampus.jpg");
/* Set a specific height */
height: 660px;
width: auto;
left: 0;
right: 0;
top: 0;
padding-left: 0cm;
padding-right: 0cm;
border-left: 0;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #5e1969;
color: #ddd;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
button.accordion.active {
background-color: #5e1969;
color: #ddd;
}
button.accordion:hover {
background-color: #ddd;
color: #5e1969;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
button.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}