Stop page from sliding to same scrolling point on next page Ajax/Javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello Everyone,

I'm using a javascript plugin I found that doesn't require jQuery to add a sliding transition effect between the pages. I like this plugin because it lets me keep a normal URL (doesn't add # to the url). However, it has one issue that I can't seem to fix.

On the first page in the sequence, the navigation links will need to be at the bottom of the page which could end up being very long. When you click on the link to slide/transition to the new page, the plugin remembers the scroll position of the previous page. You can see an example and download source code here: https://garyrozanc.com/transition-demo-01/

I'm looking for someone who can rewrite the plugin so the page that slides in after clicking on the link starts at the top like in this example: https://garyrozanc.com/transition-demo-02/

I'd use the second example, except I don't want to load jQuery just for this one feature and I like the transition effect of the first example better. Also keeping the code size small is important, or I'd be using a jQuery solution!

Thanks,
Gary

awarded to weslly

Crowdsource coding tasks.

2 Solutions

Winning solution

Without animation

You can solve it by adding window.scrollTo(0, 0); to the onTransitionFinished() function:

function onTransitionFinished() {
    window.scrollTo(0, 0);
}

With animation

If you want it to have an animation:

function onTransitionFinished() {
    scrollTo(document.body, 0, 800);
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
    var animateScroll = function(){
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};
That works, but once on the new page it abruptly jumps down into place. I want the new page to slide in already at the top.
imokyourok 7 months ago
@imokyourok I made a third alternative where it slides to the next page already at the top: http://btdemo1.s3.amazonaws.com/example3/index.html
weslly 7 months ago
I posted it in a separate solution, you need to add an extra line to fasw-transitions.js (or you can just copy it from the demo: http://btdemo1.s3.amazonaws.com/example3/fasw-transitions.js). The fix is at line 85
weslly 7 months ago
Oops, it's doing some goofy things on mobile. I'm going to test real quick and see if it's the original script or the updates.
imokyourok 7 months ago
It's not working in iOS Safari or Chrome. The new page slides in at the position of the origin page, not sliding in already at the top. Can you fix it for these other browsers?
imokyourok 7 months ago
@imokyourok Can you test this one? http://btdemo1.s3.amazonaws.com/example4/index.html
weslly 7 months ago
I'll check it in a little bit.
imokyourok 7 months ago
That fixed it. It works on iOS and Android browsers.
imokyourok 7 months ago

I checked the code, and this is you solution:

  1. for the top scroll :

you can solve it by setting scroll at top : window.scrollTo(0, 0); adding it in this function onTransitionFinished().

code:

function onTransitionFinished() {
    //Do anything you want 
    window.scrollTo(0, 0);
}

2.set the navigation link at top:

you can do it by change the code position.at the top. here is the navigation code:

<a data-ftrans="slide reverse" href="page-01.html" >Previous Page</a> |
<a data-ftrans="slide" href="index.html">Next Page</a><br>

Also, you can make it in a sticky footer or header (absolute display). so like that, you will keep it always displayed when visitor scroll the page.

View Timeline