Scrolling triggers going to other page

Design help Animations & Interactions
1

Hi everybody,

I am beginner on this platform, but hopefully someone will be able to help me with the issue I’m having.

I was wondering if it’s possible to somehow use the “Scroll into view” function as a trigger, so it would act as an automatic redirection to other page. Let’s say, you’re scrolling downwards your website and you reach the section which is triggered (once it becomes visible) to automatically redirect you to your “contacts” page and boom! You are there, without even acknowledging how you got there.

Never saw that happening, so I could share an example, but hopefully I explained it clearly enough. Hope to hear some feedback from you, guys!

Cheers!

2

Hello Branalf,
I don’t think that’s possible with the interactions from webflow, however that would be possible to do with JavaScript if you know the basics of it, but I think Webflow Interactions only let’s you play with the CSS not with the functionality.
Hope that helps!

1 Like
3

@Graphic-Logic - thanks for your insights! Unfortunately I don’t know a thing about Javascripting, but if it’s about copying and pasting few lines of code in particular window in order to achieve this result I’m seeking - I’m down with that :slight_smile:

4

Hi @Brandalf you can try copy-pasting this in your footer, it’ll basically redirect you to another site once you reach. the bottom of the page. If you’re looking for a specific section I. wouldn’t recommend that as people will not know the functionality is there and won’t understand it, it’s not a great user experience.
`

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
     setTimeout(function() {
        location.href = "/new-url";
     }, 1000)
  }
};

You’ll need to place the above inside ‘script’ opening and closing tags to run as part of the custom code on that page.

Replace. /new-url with the URL you want, for. example “https://www.google.com”, quotes must be there.
Change the 1000 if you want to delay longer, 1000 = 1 second

1 Like
5

@Graphic-Logic - Thanks for your input, really appreciate that, but I can’t get the thing to work, even though theoretically it seems that your solution is the one I’m looking. Maybe you can indicate what I am doing wrong?

I put the code in footer code section and replace the location url:

image
image1495×536 19.2 KB

When I scroll my published page and hit the bottom I end up with this and no further action happens:

image
image1904×372 13.6 KB

I also have further questions, regarding this navigation method:

  1. What url should I put if I’d want to navigate to inner page of my website, let’s say “Contacts” page?

  2. Lastly, this method seems to work only for single url. Is it possible to apply it in such a way, that each page of my website, once you scroll to the bottom - would redirect the user to specific page I indicate? For e.g. If I scroll down my landing page, I end up at “About me” page and when I scroll down “About me” page, I end up at “Contacts” page?

Thanks again for your time and effort, what a help!

6

Hello @Brandalf no worries at all, my pleasure to help!

You have to put that code in between a script tag, I cannot do it here because it blocks me from doing it but you can look at this page for reference (HTML script tag). You would need to replace that entire block inbetween the open and closed script. If you want to go to your own URL you would just replace as below
location.href = “/contacts” or “/products/product1” etc.
If you want it on different pages, then you’ll have to repeat this and change the URL on each page separately.

Hope that works…let me know!

1 Like
7

Fabulous work, @Graphic-Logic ! It does the job now and I’m very happy about that! Mad Props! :clap: :star_struck:

2 Likes
8

Glad that worked out!

9

Hi! This is very interesting, would it be possible to use this method as a way to do scroll snapping? So say you changed this code to trigger once you reached a specific point in a section, then used in page linking to send the user to the next section, would that work do you think? And how would I do that, i dont know how to code lol

10

Hi! Thank you so much for sharing this @graphic-logic, I tried it and it worked!

I’m also trying to make it so users can go to the previous page when they scroll up - do you know how to change the of the code part that means “at the bottom of the page” to “at the top of the page”?

Thank you!

1 Like
11

Hello @Brandalf

Sorry to bother you, im trying to implement this code in my project but its not working can you think of a reason this wont go to a different webpage?

https://tss-website.webflow.io/work/project-1

Thank you very much

12

hey i also tried to implement but doen’t work

can you please help me out this if you solve your problem

actually i am doing this in word press site to redirect in internal page of the site