jQuery Scroll to id in content loaded by ajax request

Question

I need to do scroll to the item loaded by ajax, but after loading the contents, nothing happens, the page is always at the top. When I click refresh button (the page is reloaded dynamically with content caching), the page scrolls to the designated target.

var startPageLoader = function( pid, sid, url ) {
        loader( 'show' );

        $.ajax( {
            url         : cCore.Settings[ 'url' ] + '/page/',
            method      : 'POST',
            data        : { _t : 'page', _pid : pid, _sid : sid },
            dataType    : 'json',
            success     : function( ret ) {
                if( !ret[ 'status' ] ) {
                    loader( 'hide' );
                    return;
                }
                loader( 'hide' );

                $( '#mainWrapper > .content article.subpage' ).hide( ).html( ret[ 'data' ] ).fadeIn( );

                if( url != null ) {
                    if( sid.length )
                        url += '#' + sid;

                    history.pushState( {}, '', url );
                }

                aProduct[ 0 ] = pid;

                cCore.Plugins[ "modalTooltip" ].rebuild( );

                prepareGallery( );
                scrollToSection( sid );
            }
        } );    
    };

    var scrollToSection = function( sid ) {
        if( !sid.length )
            return;

        aProduct[ 1 ] = sid; // sid is an name of target

        var offset = $( "#" + sid ).offset( ).top;
        $( 'html, body' ).animate( {
            scrollTop: offset
        }, 1000 );


    };

I think that could be issue with the document height, but i'm not sure.

Thanks.

Where's the code that loads the content? We don't know where you are calling this `scrollToSection ()` function. — charlietfl, Aug 24 '15 at 14:51
I'm not really sure, cause even if i click on link target after call an ajax (links in menu), that scrollto not working too.. — Wojciech, Aug 24 '15 at 16:11

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You should be able to use anchors to achieve this with some javascript also.

Here's a link describing anchors: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511

and Here's one describing how to jump to an anchor using javascript: anchor jumping by using javascript

edited May 23 '17 at 12:14

Community

1
1

answered Aug 24 '15 at 16:54

Bryant Frankford

401
3
14

This is still not that i need.. My issue is that i cannot slide to one of anchors using jQuery animate scrollTop. That simply not working when i load content with ajax – Wojciech Aug 25 '15 at 01:40

jQuery Scroll to id in content loaded by ajax request

1 Answers1