div anchors jumping too far

  • Lithestore 1.1.1

    In general we are seeing that div anchor links make the page scroll/jump too far down on the page when used. One example is the following link: https://demo.lithestore.com/product/creative-office/#reviews
    When using such anchor links the page jumps far enough down that the top section of the area the link takes us to is covered by the topbar.
    We are seeing the same thing on our own LitheStore based website.

    Also I am getting two slightly different results based on whether or not I have scrolled to the very top of the page when I click the anchor link, or if I have scrolled down just a little bit on the page when I click the link.
    If you go here: https://demo.lithestore.com/product/creative-office/
    Then if you have scrolled down a bit (so that the topbar has its class set to withbg) and you click the product review link, then the page scrolls down to show almost the full first review, but jumps further than intended (anchor target is the “reviews” div)
    If on the other hand you have scrolled all the way up on the page (topbar has no class set) and you click the product review link, then the page jumps even further down and you now can’t even see the first product review.

    Since this is true for all div anchor links throughout the theme I think it would be an improvement to add a fix for this in the theme itself.

    Also as a side note, is it an intended behaviour to set the :focus to display a blue border around anchor targets? When clicking the Customer Reviews link, the Customer Review area is surrounded by a blue (by theme default) focus border.

Viewing 1 replies (of 1 total)
  • Theme Author badjohnny

    (@badjohnny)

    Hi

    Thanks for your very detailed feedback. I added this issue to the update list, and I will release new version soon!

    For the blue border around anchor targets, yes, I defined :focus style in the CSS file. Of course you can remove the border by custom CSS like below:

    :focus {outline:0;}

    Thanks

Viewing 1 replies (of 1 total)
  • The topic ‘div anchors jumping too far’ is closed to new replies.