Anchor links (e.g. to latest comment in a thread) go to wrong position on page

MichaelTyson

Hi again,

Users are complaining that clicking on a thread takes them to a position on the page a significant distance up from the actual newest post; I can verify this by picking a particular post and copying the link (from the timestamp), then visiting that URL. The browser seems to land correctly on the right post, and then jumps upwards.

I was able to somewhat counteract it with some javascript in a pocket:

  if ( window.location.hash.length > 0 ) {

    setTimeout(function() {

      window.scrollTo(0, $(window.location.hash).offset().top);

    }, 150);

  }

But it's pretty clunky - the page loads at the right spot, then jumps upwards, then back to the correct anchor.

This never happened with the Bootstrap theme I was using previously.

Shadowdare

What theme are you using currently? If there are any fixed elements, such as navbars, the scroll value would have to be offset by the heights of these elements.

MichaelTyson

This is with the Keystone theme. Relatively unmodified.

charrondev

This is not necessarily a theme issue. It's caused by embedded content being deferred in the rendering process. We've worked around this in some internal projects by overriding the default handler to account for fixed headers and dynamically rendered content, but it's practically impossible to implement in core without messing up the behaviour of anyone else that has implemented some custom logic to say, account for a fixed header.

This could be something provided by keystone though.

MichaelTyson

Is there an event or something I can chain onto in order to apply the window offset, immediately following the asynchronous loading of the extra content? Would `window.scrollTo(0, $(window.location.hash).offset().top);` not do the trick?

donshakespeare

I have a fixed header and i use CSS to fix this rather common non-vanilla issue. It was the only thing that worked before and also works with the new boiler-template theme.

#latest, h1.toc_headings { 
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
    margin:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
}	

MichaelTyson

Thanks for that! That might come in handy with other projects. I'm still suspicious that this is a problem with Keystone, however, as I’m using that theme pretty much unmodified. I’ve changed some of the colours, but that’s about it. I haven't added a header or anything that might affect the vertical coordinates of elements