1

I have a website that I've been working on and I wanted to solve a problem that I have not stumbled upon before. It has to do with anchors and nested sections.

So the code looks like this:

<html>
    <head></head>
    <body>
        <section id="sections"> <!-- FAILS the jumping -->
            <section id="abo0">
            </section>
            <section id="abo1">
            </section>
        </section>
    </body>
</html>

Now with the browser I can just jump between the different section-tags by an anchor like href="?#abo0". IF the parent section-tag (id="sections") is not in the code. What in the browser fails by using nested sections?

I've tried things like "?#sections#abo0" but nothing seem to work, other than to remove the parent section-tag.

Any idea on how to solve this weird problem? I really need to have this nested section setup as the headings will be incorrect otherwise, in the way my website currently is designed.

Thank you! Kind regards goldenmaza

goldenmaza
  • 149
  • 1
  • 10

2 Answers2

0

Remove the section with id section and use this to scroll

http://yourwebsite.com/page.html#abo1

Your html code

<html>
<head></head>
<body>

        <section id="abo0" style="height:2000px">sd
        </section>
        <section id="abo1" style="height:2000px">
            asdf
        </section>

</body>

Pablo Escobar
  • 393
  • 2
  • 16
  • But like I said in my text unless I change the entire style of the page, so the headings will be intact and correct, I do not wanna remove the parent section tag. – goldenmaza Apr 22 '17 at 19:29
0

I can't see how it is used and fails as not all code is available, so here is a first sample showing how you could/should use it.

Leave a comment if I missed something and I'll adjust my solution.

#abo0, #abo1 {
  height: 500px;
  border: 1px solid gray;
  margin: 10px;
}
<a href="#abo0">Link 0</a>
<a href="#abo1">Link 1</a>

<section id="sections">

  <section id="abo0">
    Text 0
    <br><a href="#abo1">Link 1</a>
    <br><a href="#">Back to top</a>
</section>

<section id="abo1">
    Text 1        
    <br><a href="#abo0">Link 0</a>
    <br><a href="#">Back to top</a>
  </section>

</section>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • This seem to work but what I haven't mentioned is that the sections are "animated" by the use of transition on the Y axle. So the section slides into frame once you click on the link. I do not know if this could cause the problem as your code states there is nothing wrong with having nested sections and anchors. – goldenmaza Apr 22 '17 at 20:42
  • @goldenmaza If you check this post, [smooth-scrolling-when-clicking-an-anchor-link](http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link), you might find a solution to the animation issue you encounter – Asons Apr 22 '17 at 20:45
  • Thank you, but I would prefer not using JavaScript/jQuery for something that should be as simple as using anchors to "jump around". The question is, why does the anchor jumping break because of the current code? Since the example above works with nested sections... – goldenmaza Apr 23 '17 at 08:05
  • @goldenmaza Well, if you update your question with the code that does jump with an animation when the `
    ` tag is not present, we might be able to fix that.
     – Asons Apr 23 '17 at 08:18
  • Problem solved, I can't believe I didn't notice it! The reason for this problem was because I did an element-selector instead of a class-selector for ALL section-tags. Which ment that since the parent section-tag was out of sight, the children would never leave the space of the parent. Thank you all for your time! :) – goldenmaza Apr 23 '17 at 16:43