How to jump to a specific section, while nested, with an anchor?
Question
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
2 answers
solution1
0 2017-04-22 19:27:22
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>
solution2
0 2017-04-22 20:23:59
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.