Jump to content

How do I fix anchor Scrolling effect in external links?

Go to solution Solved by PlasticArcade,

Recommended Posts

Site URL: https://plasticarcade.com

Hello

so I setup my page to use mostly one page design with links in header to navigate to anchor links on the main page.

Problem is when I goto my blog section for instance the links don't work anymore... so if I fix it by using full links like this; https://plascticarcade.com/#about instead of just "#about", it works on external pages but it breaks the links and scrolling effect on the home page.

Is there a way to fix this?

thanks and any help is appreciated

Edited by PlasticArcade
Link to comment
  • Replies 1
  • Views 193
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution
23 hours ago, PlasticArcade said:

Site URL: https://plasticarcade.com

Hello

so I setup my page to use mostly one page design with links in header to navigate to anchor links on the main page.

Problem is when I goto my blog section for instance the links don't work anymore... so if I fix it by using full links like this; https://plascticarcade.com/#about instead of just "#about", it works on external pages but it breaks the links and scrolling effect on the home page.

Is there a way to fix this?

thanks and any help is appreciated

Well I couldn't figure out a way to fix my links like I had in my Wordpress sites in the past so instead here was my solution to the problem...

Instead of making the links function differently on different pages I just hid the primary menu on my home page and created a custom menu which had the jump to anchor links in it.

Then I use the regular menu with normal links in my other pages so I can get the scroll effect on the main site and use the normal everywhere else.

Here is the code I used to create the solution

 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="61b115821e337f2af945c3e4"] {
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  opacity: 0.95;
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="61b115821e337f2af945c3e4"] .content-wrapper {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

section[data-section-id="61b115821e337f2af945c3e4"] .html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="61b115821e337f2af945c3e4"] .html-block p {
  display: inline-block;
  margin: 0 20px;
}
 

I did not come up with this code myself I found it here from this YouTube video and website

https://beatrizcaraballo.com/blog/sticky-content-navigation-squarespace

Hope this helps anyone that is trying to do a similar thing.

She goes through several different kinds of menu navigations, really great video.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.