Assigning internal links to different sections of a parallax website

Question

The main goal that I am trying to accomplish is to improve the seo for my one page parallex website and from what I've read, being that is is one page this is hard to accomplish due to only having one page title and one page to index. BUT, everything I read is saying that as a workaround you can "Assign internal links to different sections of the parallax website in order to index the content. Search engines will recognize these sections as different pages on search engine result pages and allow more entry points to the site," but no one tells you how to do it. - See more at: http://www.r2integrated.com/news/blog/keys-to-designing-an-awesome-parallax-scrolling-website#sthash.jRuZ1auq.dpuf

Here is a some of the code for the nav section to give you an idea of how each section is linked up. Each link/section is identified as an ID, such as the href="#about", href="#team" and href="#work".

About

                            <div class="w-nav-item level_1">
                                <div class="w-nav-item-h">
                                    <a href="#team" class="w-nav-anchor level_1"><span class="w-nav-title">Team</span><span class="w-nav-hint"></span></a>
                                </div>
                            </div>
                            <div class="w-nav-item level_1">
                                <div class="w-nav-item-h">
                                    <a href="#work" class="w-nav-anchor level_1"><span class="w-nav-title">Work</span><span class="w-nav-hint"></span></a>
                                </div>
                            </div>

So, I'm trying to figure out if I already have it done correctly and if now what I can do so that search engines will index each section.

Additionally, I am trying to get my url to change as you scroll down through each section like this parallax website does: http://tooyoungtowed.org/

Any help is much appreciated!

Answer 1

You could use something like Bootstrap's ScrollSpy combined with the HTML5 History API pushState function.

Essentially, ScrollSpy listens for scrolling. On every scroll it works out how far you are from the top, and if you are at pre-defined point, then it will run functions you tell it to run.

The History API lets you change the URL without reloading the page.