miguel-perez / smoothState.js

Unobtrusive page transitions with jQuery.
MIT License
4.43k stars 505 forks source link

Links not going back to top between page transition #276

Open mitchrenton opened 8 years ago

mitchrenton commented 8 years ago

Hi Miguel,

I've setup smoothState and I love it. I just have an issue;

When I click a link and go from one page to another, the destination page is at the same scroll level as the origin page. I'd expect the page to go back to top, like a traditional link.

I don't see anything in the options that could solve the issue. Here is my setup...

`// Page transitions init $(function(){ 'use strict'; var $page = $('#js-transition'), options = { debug: true, prefetch: true, cacheLength: 2, forms: 'form', onStart: { duration: 200, // Duration of our animation render: function ($container) { // Add your CSS animation reversing class $container.addClass('is-exiting'); // Restart your animation smoothState.restartCSSAnimations(); } }, onReady: { duration: 0, render: function ($container, $newContent) { // Remove your CSS animation reversing class $container.removeClass('is-exiting'); // Inject the new content $container.html($newContent); } }, onAfter: function() { prep(); } }, smoothState = $page.smoothState(options).data('smoothState');

});

// Creating a preparation function so smooth transition doesn't cache the off canvas classes. $(document).ready(function(){ prep(); });

function prep(){ var nav = responsiveNav(".nav-collapse", { insert: 'before' }); }`

Hopefully this is something straight forward!

floriannicolas commented 8 years ago

Hi, Do you have this problem on every browser ?

I never had this problem so, it will be difficult for me to help you, but maybe this trick in onReady smoothState method could help :

onReady: {
    duration: 0,
    render: function ($container, $newContent) {
        // Remove your CSS animation reversing class
        $container.removeClass('is-exiting');
        // Scroll to top (if scroll is not in body, please select the good container)
        $("html, body").css({ scrollTop: 0 });
        // Inject the new content
        $container.html($newContent);
    }
},

PS : To add code like this, don't use the WYSIWYG button but prefer use Markdown like the example found here