Scroll to next CMS Item on same page

Design help Custom code
1

Hi Guys,

I’m trying to find an answer to this question, any help is appreciated.
Is there any way you can scroll to next CMS item in the same page?

So far, I’ve tried scroll() jQuery but it only scroll the window in px and not entirely to the next cms item.

Thanks in Advance!

2

There are a few ways to do this.

The scrolling itself is trivial.

  • If you have an element reference, you can simply call .scrollIntoView() in script. ( see reference )
  • Or, if you know the next list item’s slug, you can pre-create an item with an ID, and then scroll to it using a standard #hashlink.

The bigger problem is predicting what the next item would be. You either have to be very strict on controlling your data, like a numbered column with 1, 2, 3… and no gaps, or you need a script that can adapt to the situation.

I’d recommend the latter approach in most cases.

Write a script that triggers on “next” button click, and

  1. Find the Collection List Item element it’s within
  2. Determines the next element
  3. Scrolls to it
3

Thanks. I’ll see if I come up with a solution.
Appreciate the help! :slight_smile:
Thanks again.