stackoom
  简体   繁体   中英

Scroll to top of a section if i go to the next slider?

 原文  2020-10-21 15:47:48  9   2    javascript/ html

Question

I'm trying to make a slider with html/CSS(/JavaScript), but if I want to go to the next slide while I on the bottom of the previous, the next one goes also to the same y-position of the previous one, so the bottom. So what I want is that he always scrolls to the top of the article. Does anybody know how to do this? Here is my code: 

 const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; });
 html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 30%; margin-right: 8.1rem; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
 <body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>

2 answers

solution1
 0  2020-10-21 15:54:53

You need to use window.scroll({top: 0}) . For more reading . 

 const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; window.scroll({top: 0}) }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; window.scroll({top: 0}) }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; window.scroll({top: 0}) });
 html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 30%; margin-right: 8.1rem; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
 <body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>

solution2
 0 ACCPTED  2020-10-21 16:26:18

Not sure if this helps or not, but the top margin for the li elements is really big so if you cancel it, the top of the article should show.I also modified the width and added padding so the text wouldn't overlap.

.slider li {
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 2rem;
  max-width: 33%;
  margin-right: 8.1rem;
  padding: 0 3% 0 3%;
  margin-top: 0% !important;
}


 const left = document.querySelector('.caroussel__arrow--left'); const right = document.querySelector('.caroussel__arrow--right'); const slider = document.querySelector('.slider'); const indicatorParent = document.querySelector('.control ul'); const indicators = document.querySelectorAll('.control li'); index = 0; ; indicators.forEach((indicator, i) => { indicator.addEventListener('click', () => { document.querySelector('.control .selected').classList.remove('selected'); indicator.classList.add('selected'); slider.style.transform = 'translateX(' + (i) * -32 + '%)'; index = i; }); }); left.addEventListener('click', function() { index = (index > 0) ? index -1 : 0; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; }); right.addEventListener('click', function() { index = (index < 3 - 1) ? index+1 : 2; document.querySelector('.control .selected').classList.remove('selected'); indicatorParent.children[index].classList.add('selected'); slider.style.transform = 'translateX(' + (index) * -32 + '%)'; });
 html{ font-size: 62.5%; } .carousel { border: 2rem solid #212121; height: 40rem; overflow: hidden; position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2), 0 0.4rem 1rem rgba(0, 0, 0, 0.1); } .slider { display: flex; height: 100%; width: 300%; list-style: none; overflow-y: scroll; align-items: center; justify-content: center; } .slider li { flex-basis: 100%; justify-content: center; align-items: center; display: flex; font-size: 2rem; max-width: 33%; margin-right: 8.1rem; padding: 0 3% 0 3%; margin-top: 0% !important; } .slider li:nth-child(1){ margin-top: 40rem; } .slider li:nth-child(2){ margin-top: 60rem; } .slider li:nth-child(3){ margin-top: 35rem; } .caroussel__arrow--left, .caroussel__arrow--right { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow i { font-size: 7rem; -webkit-user-select: none; color: #416be4; } .caroussel__arrow--left{ left: 1rem; } .caroussel__arrow--right { right: 1rem; } .control ul { list-style: none; display: flex; position: absolute; bottom: 0; left: 50%; margin-top: 0; padding: 0; transform: translate(-50%); } .control ul li { width: 1rem; height: 1rem; background: transparent; border: 0.2rem solid #94673E; border-radius: 5rem; margin: 1rem; cursor: pointer; } .control ul li.selected { background-color: #94673E; }
 <body> <main class="container"> <div class="carousel"> <ul class="slider"> <li><section> <h2>Uitleg: Introductie</h2> <p> In deze interactieve omgeving gaan we je een beeld geven van de kindertelefoon. We gaan je laten zien waarvoor kinderen bellen, hoe zo'n gesprek verloopt en hoe kinderen zich voelen tijdens het gesprek. De verhalen die je zometeen te zien krijgt zijn te zien in de documentaire 'Luister', gemaakt door Astrid Bussink. Klik op het pijltje naar rechts om verder te gaan met de uitleg. Als je de uitleg hebt voltooid kun je starten. </p> </section></li> <li><section> <h2>Uitleg: Hoe werkt het?</h2> <p> Stel je voor dat jij een medewerker bent van de kindertelefoon. Je dienst is net begonnen en je neemt plaats achter je bureau. Daarna gaat er een telefoon af, deze kan je opnemen door het opneem icoontje naar rechts te swipen. Daarna gaat het gesprek beginen. De verhalen van het kind verschijnen op het beeld en je voelt hun emoties als het ware aan. Er verschijnen ook emojis op het scherm om je te laten zien hoe het kind je voelt. Aan het einde van het gesprek is het heel belangrijk dat je een kort verslagje maakt van het gesprek. Dit is niet moeilijk. Je geeft kort aan waar het gesprek over gaat, hoe het kind zich voelde en wat voor advies je hebt gegeven. </p> </section></li> <li><section> <h2>Uitleg: Einde</h2> <p> Wil je het gesprek stoppen? Klik dan op de telefoon onder in het scherm. Nu verschijnt de knop 'ophangen', als je hierop klikt stopt het gesprek en ga je terug naar de beginpagina. </p> <p> Wil je tijdens het verhaal de uitleg lezen? Klik dan op de menu-button rechts bovenin het scherm en klik op 'Naar uitleg'. </p> <p> Wil je een ander verhaal bekijken? Klik dan in het menu op 'verhalen'. </p> <button>Start</button> </section></li> </ul> <div class="control"> <span class="arrow caroussel__arrow--left"> <img src="chevron_left-24px.svg" alt="left arrow"> </span> <span class="arrow caroussel__arrow--right"> <img src="chevron_right-24px.svg" alt="right arrow"> </span> <ul> <li class="selected"></li> <li></li> <li></li> </ul> </div> </div> </main> <script src="main.js"></script> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery scroll to top and scroll to next section Go to next section on scroll down, previous section on scroll up jQuery On scroll go to the next section in a horizontal website Scroll to the top of section (.js) Scroll to next section JQuery Scroll to Next Section On scroll move to next section How to I use the detect key function to go to the next section in Javascript? jQuery: click to scroll to next section Scroll to next section/class issue
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM