Issue with scroll to anchor

[adamgins]

Issue scrolling to #: Browser/App does not scroll to id=<tag>

as detailed here: https://github.com/EventedMind/iron-router/commit/65b844eb0d988d93b1ac8a5bf54966d4dd2f0c46#commitcomment-9236380

Workaround here:

Router.onAfterAction(function() {
    var self = this;
    // always start by resetting scroll to top of the page
    $(window).scrollTop(0);
    // if there is a hash in the URL, handle it
    if (this.params.hash) {
        // now this is important : Deps.afterFlush ensures that iron-router rendering
        // process has finished inserting the current route template into DOM so we
        // can manipulate it via jQuery, if you skip this part the HTML element you
        // want to scroll to might not yet be present in the DOM (this is probably
        // why your code fails in the first place)
        Tracker.afterFlush(function() {

            if (typeof $("#" + self.params.hash).offset() != "undefined"){
                var scrollTop = $("#" + self.params.hash).offset().top;

                $("html,body").animate({
                    scrollTop: scrollTop
                });

            }

        });
    }
});

courtesy: http://stackoverflow.com/questions/25301888/meteor-iron-router-router-go-callback-possible

[adamgins]

Hi, I am having some additional issues with the work around:

I am inserting a new doc and then trying to scroll to it's position on the page by inserting a hash eg #some-hash-tag to scroll to <div id="some-hash-tag">.

I am calling a function with a call back to ensure the doc is inserted but it seems like the router is trying to go to the page before the page has rendered.

Ie if I manually add the URLhttp://linktodoc#"some-hash-tag the browser scrolls to the correct postion.

If i try and do this programatically with something like Router.go('route1', {_id: someID}, {hash: someHashTag}); it does not scroll there.

Any hints / best practices for this, please?

[andreayaya]

I also have this issue. I'm sending through href="{{pathFor 'help'}}#hash" but when it goes to the help#hash page it passes the id="hash" location ending up further down the page.

I'm using the code above. I did not see a better solution to the problem, and this is the closest I have gotten to the correct position on the page.

[adamgins]

@andreayaya , sorry for slow reply Try href="{{pathFor 'somePage' hash=itemAnchor}} where itemAnchor is a Helper function that returns a string... or just hard code it, if that's what's needed.

[andreayaya]

I believe the problem I am having is that my page is not starting at the top - $('window').scrollTop(0); is not working. If I reload the page it does the animation properly and goes to the correct position. Is there something special I need to use $('window').scrollTop(0); ?

[hazio]

@andreayaya , use $(window).scrollTop(0) instead of $('window').scrollTop(0)

[hazio]

@adamgins , I cannot get the workaround work because hash element cannot be found from DOM for some reason.

if (typeof $("#" + self.params.hash).offset() != "undefined"){
         // unreachable code
}

Any ideas why this happens?