0

I am using parallax scrolling on my website, but it seems to be preventing my HTML anchors from working. Specifically, they DO work if you click the buttons sequentially (top to bottom, or lower layer to higher layer), but once you are at the bottom of the page (topmost layer), it will not return to a previous layer.

The exception is the bottom layer, for which I use the standard "#". But no others work. I am using the HTML5 standard of linking to specific elements by id, rather than the depreciated "name" tag.

Anchor:

<a href="#maddie">
    <div id="maddiebutton" class="tooltip">
        <span class="tooltiptext">Maddie</span>
    </div>
</a>

Target:

<div id="maddie"></div>

Website: http://www.untilthemonsters.com/characters.html

The "buttons" I'm referring to, with the anchor links, are the colored circles on the right of the page.

The button code is below the comment "Character Buttons".

The page sections (divs) to which the buttons are linked are commented by name (e.g. "Elan", "Maddie", etc.)

(Edit: Added the code, but the problem seems to have been with the CSS, specifically that the targeted divs had a fixed or "sticky" position).

KermitO
  • 1
  • 1
  • I think your issue is with `position: sticky`. A sticky element acts like a relative element until scrolled into view when it becomes "stuck" to the position defined. So when they are all in view and you try to go back by clicking a previous button nothing happens because it is already in view even though it's behind other character cards. You would have to scroll back to that original position. This really isn't parallax at all – zgood Mar 19 '18 at 17:17
  • @zgood Is there any way around this? I even tried forcing a page reload onclick, but it still did nothing. If the "#" anchor works, there must be some way to make others, too? – KermitO Mar 20 '18 at 04:59
  • See answer below. – KermitO Mar 20 '18 at 13:08
  • Please add the code back into your question. I can help you with getting it to show up – TylerH Mar 20 '18 at 13:18

1 Answers1

0

I think you were right @zgood. Found this solution by searching for "anchors not working position sticky":

offsetting an html anchor to adjust for fixed header

display: block;
position: relative;
top: -1px; /* adjusted to suit my purposes */
visibility: hidden;

In my case, I just created a separate div to serve as the anchor, and made it offset by only 1px.

TylerH
  • 20,799
  • 66
  • 75
  • 101
KermitO
  • 1
  • 1