Open oatmealr82 opened 4 years ago
Assuming your FAQ sections are structured like this:
<div class="faq-section">
<!-- FAQ content -->
<div class="elevator">Back to Top</div>
</div>
<div class="faq-section">
<!-- FAQ content -->
<div class="elevator">Back to Top</div>
</div>
<!-- ... and so on for other sections -->
You can use querySelectorAll
to select all the .elevator
elements and attach the elevator behavior to each of them. Here's how you might do it:
document.addEventListener("DOMContentLoaded", function() {
const elevators = document.querySelectorAll(".elevator");
elevators.forEach(elevator => {
elevator.addEventListener("click", function() {
// Scroll logic to move to the top of the FAQ section
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
});
});
This code iterates through each .elevator
element, adding a click event listener to each one. When an elevator is clicked, it smoothly scrolls to the top of the corresponding FAQ section.
I'm a true novice, and tried using the Back To Top feature multiple times on the same page. This was for an FAQ, which has multiple sections. At the end of each FAQ section I wanted to place a div elevator class that triggered the elevator. However, when I switched to querySelectorALL it broke the feature. I worry that I'm either doing something stupid, or that the code has to be updated to support using an array of elements on the same page? Love the 'easter egg' feature you made, but would love the readme to be updated to support multiple on the same page.