How do I redirect user to an external page on scrolling?

Question

Recently I started building a personal website using HTML5, CSS3 and JScript. I am having a lot of fun with this and I thought I could do everything without any problem but I was wrong so I am here.

My query is : how do I redirect a user to an external page on when the users scroll down / bottom?

I already sought on the net and I found quite good answer but none of them helped me. Most of the answers explain using window.location.replace("http://stackoverflow.com"); Or something similar but I am looking for something else.

I also tried looking in Jquery documentation but I did't find anything about scroll.

=========================================================================

EDIT

Basically I have a full width and length page, What I a want is when the user scroll down with the mouse I want to redirect from the Home page to About. WebPage

I tried with the solution given so far but nothing happen! no error, nothing at all.

Thank you, for your time!

What are you looking for? window.location.replace("http://stackoverflow.com"); should do the trick — CaptainHere, Mar 11 '17 at 16:43

score 3 · Accepted Answer · edited May 23 '17 at 10:29

To redirect when the user scrolls to the bottom of the page, you can hook into the scroll event and then fire the redirect when the window height plus the position of the top of the window equals the total document height.

Using jQuery it could look like this:

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       window.location.replace("http://stackoverflow.com");
    }
});

This answer has more information on picking up the scroll event and customising that behaviour with jQuery.

Update

JSFiddle here

The code above may not work in JSFiddle or similar as stackoverflow.com set X-Frame-Options response header to SAMEORIGIN. You may also run into problems in some browsers if redirecting from HTTPS to HTTP. The JSFiddle linked above demonstrates a working implementation, redirecting to another JSFiddle page to avoid the X-Frame-Options issue.

I've added a JSFiddle to demonstrate this solution works – res10 Mar 12 '17 at 19:09 — res10, Mar 12 '17 at 19:09

Umair Khalid · Answer 2 · 2017-03-11T17:13:04.933

0

It works well on dynamically created content as well

var lastScroll = 0;
$(document).on( 'scroll', '#ScrollContainer', function(){
    //console.log('Event fired');

   var st = $(this).scrollTop();
   if (st > lastScroll){
       window.loaction.href = "www.google.com"
   }

   lastScroll = st;
});

edited Mar 11 '17 at 17:13

answered Mar 11 '17 at 17:01

Umair Khalid

2,259
1
21
28

I did try but nothing happened, is there any other way that I can do? – t97 Mar 12 '17 at 01:02

How do I redirect user to an external page on scrolling?

2 Answers2