Navbar link to \sectionID if on that page, OR page\sectionID of not

Design help General
1

Hi, I like the no-reloading, smooth scroll between sections on the same page (lets call it ‘home’) when using the nav bar buttons

But obviously from another page, the buttons need to target the home page\sectionID…

…which means that button no longer does what I said in my opening sentence…it now reload the page even when on the page, which isn’t a great experience.

Couldn’t find the solution in the forum, can you help?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Russell, can you share a published site link ( webflow.io is fine ) of a page containing the link, and indicate which link you’re clicking for the cross-page page/sectionID navigation?

I think I have an approach here, but I need to check your setup.

3

Apologies, yes links and design below

I’ve started hardcoding the links so when publishing to webflow.io most pages point to my custom domain now…will make for a disjointed reviewing experience but you can see the targets on mouse over right… I’ll explain the navigation I’m after below

Functionality I’m looking to achieve
On navbar button click
…go to a specific section on another page (I can do this if hardcoding ‘domain/page#sectionID’)
…only reload a page if not already on it not on it…the smooth scroll is great
…build and test my solution on webflow.io (can’t do this, because of above hard coding…is there another way? I tried relative paths and they just didn’t work for me)

If I have to, for sake of simplicity, I’ll move sections IDs to separate pages.

Navigation design

  1. Home (effectively a consultancy services landing page)
    https://need-lead-succeed.webflow.io/

Page sections with IDs in the above, which are named in the navbar

  • #solutions
  • #clients
  • #lets-talk
  1. Landing page
    Task Switch Challenge

Page sections with IDs in the above, which are named in the navbar

  • #lets-talk

Page sections with IDs in the above, which I’ll want to land at from external sites (exiting a typeform, exiting mailchimp sign up etc)

  • #team
  1. Other pages still to add that I’ll want to navigate in and around
    to be added - about me
    to be added - privacy
    to be added - blog posts
4

Got it, as it’s not quite setup, I can’t really test what I was thinking.
But basically there are 2 approaches that I’d try

CSS APPROACH
Style blocks go in the /head custom code area

<style>
html {
  scroll-behavior: smooth;
}
</style>

JS APPROACH
Something like this, in the /body custom code area

<script>
document.addEventListener("DOMContentLoaded", () => {
  // Check if the URL contains a hash
  const { hash } = window.location;
  if (hash) {
    // Try to find the element
    const target = document.getElementById(hash.slice(1));
    if (target) {
      // Scroll to the element smoothly
      target.scrollIntoView({ behavior: "smooth" });
    }
  }
});
</script>

You’d have to test, and adapt these to your situation.

5

Thanks Michael. I’m not going to get a chance to try this until later next week, liking the look of the js, assume that goes in the body of each page so it’s executed on navigation.