Streaming live at 10am (PST)

Different scroll behaviour for anchor links

Hi there,

I’m working on a pretty big scrolling website for a for a photo journalist with background videos and lots of pictures. The scroll site is divided into different chapters. I like the user to be able to scroll directly to a chapter using the chapter navigation element, this should scroll to the anchor point without any animation. I know I can use data-scroll-time = 0 for this.
I also make use of anchor links within chapters to scroll to the next section, and I want to have a scroll animation for this interaction.

  • So jumping to anchor points via the chapter navigation without animation (data-scroll-time = 0)
  • And scroll to anchor points within chapter via in-chapter buttons

Does anyone know how I can set this up? Help is very much appreciated…

(link removed)

Hi @reiniermartin, thanks for your post.

If you create a link to an anchor point/id directly, i.e. you choose the url type in link settings and put in the ID to the page and anchor id, the user will immediately jump to next section.

The link in the url link type would look something like ‘/page-slug#anchor-id’

The anchor ID is set in the element settings.

When you want the page to scroll to a section (and activate the scrolling), then setup a Section link instead of an anchor link.

Both the sections and the anchor links ID is set the same way, but for instant jump to anchor link, use the URL link type and for smooth scrolling to section, use the section link type.

I hope this helps

Hi @cyberdave, thanks for this suggestion. I’ve been trying it out, but unfortunately I can’t get it to work without using custom coding. I appreciate your help though, it would have made sense… :slight_smile: