I’ve seen websites where clicking an item in the main navigation menu scrolls to a section on the same page. eg a Contact form at the bottom of the home page. How is this done, and which stacks would be able to achieve this? Is there a technical term for this?
I’m currently using the Platform framework…
Here’s an example - if you click More/Contact Us in the main menu at the top you’ll see it scrolls to the bottom of the home page…
Platform does have a built in “scroll to” stack, will have a look and see if it can do what you are after
Ok two ways you could do this, that I can think of anyway.
Method One
First would be to go old school (probably not super smooth but should work fine) and put a html anchor for the section you want to jump to.
To do this use the built in HTML stack and put the following code, we’ll assume the section you want to jump to is contact us
<a name="contact_us"></a>
This will act as an invisible marker for the section. Make sure you place this HTML stack just before the start of the section.
Next create a new “Offsite Page” to your project. Move this to where you want it to be in the navigation. This will put an entry in the navigation of your site. Click on the newly created Offsite Page’s title and put in the following, we will assume it is called Contact in the menu.
<a href="https://www.mysite.com/page_of_interest/#contact_us">Contact</a>
This way will mean that whenever someone clicks on Contact on the navigation, it will move to the page and section containing the marked Contact Us section.
Method Two
Use Platform’s Scroll To stack. Once you have the button/icon/or image setup for the link and the section to jump to try this (assuming you are using the built-in powerboat menu stack):
Create a two column stack, place Powerbar in one and the button/image/icon for the Scroll to stack in the other column. Adjust the columns width’s until they appear satisfactory and display enough of the menu and the Scroll To trigger.
This should work but has the downside that it cannot be nested in the navigation menu and would always be visible.
You might be able to use other menu bars to achieve a similar or better outcome. Platform’s powerbar menu is a little lacking in this respect, I really like Foundation’s ability to add child stacks to the menu to display other stacks in the navigation menu.
Hope all this makes sense and helps, I’m sure someone more knowledgeable than me can suggest a better solution or point out some downsides I haven’t thought of!
Hey @Kroy I don’t have access to my MBP this evening, but I’ll be happy to tell you how I did it with this site < https://www.ssclimbing.com > tomorrow. There is a stack that makes it very easy (and in this case, I had to make the menu slide in and out, too).
If you’re looking for a static menu, like this site which is under construction < https://gfog.incredulation.com/ >, it super easy using The Big White Duck stack Section Pro (I haven’t added the menu to mobile phones yet- it’s still under construction).
Many thanks for the detailed intrsuctions pmjd! I’m trying method one right now but I’m not sure where to put the second line of HTML code. I’ve tried all the places I can think of that might be ‘page title’ in the page inspector but none of them produce any results when I click on ‘Contact’ (the offsite page) in the navigation bar (Platform’s Powerbar)…
I’ll try method two in a bit…
That would be great, dave, thank you. Those two websites are beatutiful.
May I ask - is the climbing website a particualr theme, or framework? And are all the buttons on that site the same stack, and which stack is it?
Thanks, Kroy,
I appreciate the compliments!
The climbing site was initially mocked up in Balsamiq, then reworked in Photoshop. It’s 100% Foundation (so, no theme). Most of the buttons are Sweet Buttons, but if I were creating it today, I would use ButtonPlus2 from the Big White Duck Many of his stacks are aimed at people who haver a bit of CSS or html coding, but man are they beautifully thought-out and well-written. As mentioned, the new site for Good Friends is employing his Sections Pro stack, which allows for the gliding between sections. In the event you are not familiar with him, all of his stacks are totally FREE - but it’s always nice to make a donation.
For the climbing site, the beautiful sliding effect is the Jump Stack from @willwood https://stacks4stacks.com/jumpstack/ It was super-easy to implement, and the scrolling action is very, very smooth. Will is a long-time developer of RapidWeaver stacks and themes -and his customer service is excellent. Another fantastic thing he does is make most (all?) of his stacks available in demo-form. So, you can always try his products before making the commitment. I can’t think of any of my sites that don’t have a some of his stacks in them. For the menu, my client really wanted the menu to slide in and out, so for this I used Joe Workmans Glider stack. Lastly, in case you aren’t familiar, Joe has a “Hangout” every Friday where he shows off new stuff and answers questions from other people on the call. If you have questions on how to implement something, this is a great way to get input from others.
@Kroy Hi Tim, hopefully this screenshot will make it clear.
It’s the actual title of the Offsite Page in the side bar, sorry I wasn’t clearer.
Unless @juergenbarth could suggest someway of making this work with the Scroll To stack in Platform
Hi pmjd
There must be something I’m still not getting.
This is what I’ve done:
Contact is the Offsite page:
I’ve pasted the HTML into the sidebar of the Offsite page:
I have the HTML stack on the home page just above the Contact stack:
This is what the nav bar looks like on the home page:
Not in the side bar, in the page name it’s self (on the left where you type the page name)
Aah - Yes, I did try that too, earlier…
Like this, yes?:
But then the nav bar looks like this:
And I tried it like this too, but it still doesn’t work:
Okay, then put the full path (including the #contact_us) in the url for the offsite page and several what that gets you.
Example: https://yoursite.com/yourPage/#yourTagName
Like this?:
I think I already tried that too - still not working…
also tried it just inputting:
https://www.mysite.com/page_of_interest/#contact_us
Yes, just the url not the html code.
Does it work in your browser?
What is the url?
do you mean this:
https://www.mysite.com/page_of_interest/#contact_us
I haven’t tried it in my browser, do I need to export the site to do that?
Yes, you need to publish it.
Hmm - I haven’t done this in a while and it was always with a theme. This is the first time I’ve used a framework. I guess I must have some settings wrong because in the exported folder I created there appears to be no folder for the home page, which has most of the content. Sorry, I know this is another topic, but I’m a bit stumped for now…
thats because the home page is that root export folder. that index.php file is the page.
FYI, you cant run that file locally unless you are running a local web server like MAMP.
Yu have to publish the site to a web server - your hosting account
FYI 2. you should same your folders don’t leave default page-X
Ok, I haven’t set up a host yet.
Yes, I remember I need to rename the pages…
Is it possible to publish online in a way that only I can see the site?
Thanks for your help!
