Reply To: Single Landing Page

[Roberto Enrique]

Ok, to accomplish this you should first understand that the basic idea of this functionality is that you links points to an ID on that same page.
So, in a page like this:

<h1 id="first-title">I'm a tittle and my ID is "first-title"</h1>
<p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>

<h1 id="second-title">I'm a tittle and my ID is "second-title"</h1>
<p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>

<h1 id="third-title">I'm a tittle and my ID is "third-title"</h1>
<p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>

You want a navigation like this (this is just for demo purposes, you should do this using the “custom link” in the WordPress menu editor):

<ul>
<li><a href="http://www.mywebsite.com/#first-title">Go to Title One</a></li>
<li><a href="http://www.mywebsite.com/#second-title">Go to Title Two</a></li>
<li><a href="http://www.mywebsite.com/#third-title">Go to Title Three</a></li>
</ul>

Clicking on each of the link will take you to the relative element with that ID
Read this to get better info on how this works (pretty simple but useful stuff):
http://www.webweaver.nu/html-tips/link-within-a-page.shtml

I prefer to use the full URL rather than just the “#ID” because sometimes you want to add another page (like “blog” or something…) and you want your menu to behave correctly.

——————————————————————-
EXTRA: SMOOTH SCROLLING

One really nice thing to have when using this kind of one page websites is to have smooth scrolling.
You can easily add this functionality if you’re using the GP-Hooks Add-on

Just add this to wp-footer hook

<script>

// scrolling thanks to https://css-tricks.com/snippets/jquery/smooth-scrolling/

jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

</script>

And it should just work

Hope my explanation was clear enough.

• This reply was modified 7 years, 5 months ago by Roberto Enrique.