Making Next button go to top of page

JavaScript
1

I’m using this page to create a slideshow of text and images, all on one page: https://www.w3schools.com/howto/howto_js_slideshow.asp

It works perfectly. When you see the slide, read the text, and scroll down to click on the Next button, the next page opens. Unfortunately, it opens at the bottom of the page and the user needs to scroll up to start from the top.

I want to modify the code so the Next page starts from the top of the screen.

This is the part to change, but I don’t know how to get the id=“top0”…id=“top9” into the script. (There are 10 slides.)

	<script>
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>

I thought of using a switch() statement at the end so, for example, when mySlides is at 0, it would switch to the id of #top1. But I had no idea what to put in switch(HERE) and how to tie it into mySlides[i].

var top;
  switch(mySlides[i]) {
  case 0:
    top="mySlides#top0";
    break;
...
goToTop;
}

function goToTop()
{
...
}

Any help would be appreciated.

2

You mean like using setAttribute and specifying the id as the attribute to set? Then it is just a matter of setting it to the value of i in your loop. Check out https://www.w3schools.com/jsref/met_element_setattribute.asp for more info. :slight_smile:

3

Hi @WebSteve, you mean basically scrolling to the top of each slide? You wouldn’t need separate IDs for that, just scroll to the top of the container:

var container = document.querySelector('.slideshow-container')

// ...
container.scrollIntoView(true)

Or scrolling to the top of the screen:

window.scrollTo(0, 0)
4

FWIW, that code from w3scools can be improved quite a bit; namely, avoiding inline JS, not querying for the same elements on each slide change, using classList.toggle() instead of replacing strings in the className, using a proper zero based slide index, and generally using more modern constructs and techniques:

const slides = document.querySelectorAll('.mySlides')
const dots = document.querySelectorAll('.dot')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
let slideIndex = 0

function showSlides (newIndex) {
  slideIndex = (slides.length + newIndex) % slides.length

  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === slideIndex)
  })

  slides.forEach((slide, index) => {
    slide.style.display = index === slideIndex ? 'block' : 'none'
  })

  slides[slideIndex].scrollIntoView(true)
}

prev.addEventListener('click', () => {
  showSlides(slideIndex - 1)
})

next.addEventListener('click', () => {
  showSlides(slideIndex + 1)
})

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    showSlides(index)
  })
})

showSlides(0)
3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.