- This topic has 3 replies, 4 voices, and was last updated 7 years, 11 months ago by Tom.
-
AuthorPosts
-
April 13, 2016 at 1:03 am #186415Damien
Hi There
Is there any way of setting the generatepress theme to work as a single landing page for the whole site? So rather than each link going to a new page, it simply scrolls down to a section on that page?
Many thanks.
April 13, 2016 at 1:49 am #186438HamishHi there,
I just saw this while browsing. There are plenty of tutorials around for this as it is a wordpress method that works with GP. It involves anchor links and custom menus…
For example https://wordpress.org/support/topic/how-do-i-create-page-anchors-from-wordpress-menus
Last poster:
In HTML this is called a document fragment.
There are two steps. First you insert an anchor in your webpage:
<h2>Reviews</h2>
Then in Appearance > Menus, in the Custom Links box you put in the URL plus a pound sign plus the fragment name:
http://www.casafuturatech.com/smalltalk/#smalltalk-reviews
Then you can put the menu item anywhere in your menus.April 13, 2016 at 3:46 am #186457Roberto EnriqueOk, 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.shtmlI 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 SCROLLINGOne 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-onJust 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, 11 months ago by Roberto Enrique.
April 13, 2016 at 10:38 am #186572TomLead DeveloperLead DeveloperBeautiful, you guys are awesome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.