Page scrolls to bottom when reached from a link

Question

I'm having an issue with a page auto scrolling to the middle rather than starting at the top when the user reaches it via links. For instance, when I click any of the buttons that say "[#] Recommendations" below the image, the link takes me to that image's recommendations page. The problem is that if the page has more than one recommendation, as in these particular requests:

http://whatgoeswiththis.co/#request/8

http://whatgoeswiththis.co/#request/5

The page loads scrolled halfway down. If there isn't a recommendation uploaded yet, it appears to load fine.

Appears to be a problem on all browsers, and it appears that the scroll is set to a random location depending on number of recommendations that have been uploaded. The page has a regular HTML/CSS header, but everything below the top inch is handlebars.js scripts.

How can I make it so that any time the user reaches the recommendations page it starts at the top of the page? I don't want to add a new javascript tag, I'd prefer to remove whatever is causing the scrolling if possible. Thanks!

Answer 1

I finally realized what the problem was. I had this exact same problem on a Backbone app I was working on awhile back. The problem is that the page remains at the exact same scroll position when you click on a request-card. So depending on how far down the home page you scroll will determine where on the request page it looks like you landed.

I'm not sure how best to fix this on your site, so I'll describe what we did to fix it on ours. On our website, we just rebuilt the DOM of the main element on our site so that the scroll position would be reset to 0. For your site, this would mean that the template for the homepage would only have the elements within #homepage , and when you click on a link, a new template is used that contains everything inside #requestpage .