Jump to content

Anchor link to page section not working!

Go to solution Solved by tuanphan,

Recommended Posts

Hey @Laurelb01 ! Unfortunately, page sections won't respond to a selector like that, but you can totally add an anchor link using some HTML in a code block instead. This will pull that anchor to the top of your browser, so add it to the bottom of the page section just above the services section. Here is a step-by-step tutorial on how to create it: 

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
  • Solution
On 4/7/2022 at 5:00 AM, Laurelb01 said:

Thanks for this @inside_the_square  I'm actually familiar with this method! My challenge is that this section is a list section (the templated one) and therefore I actually can't add a code block above the title.

Any other thoughts / recommendations?

You can add a Code Block with anchor id. Then use CSS to move down Code Block into List Section.

Or use JavaScript to add a Code Block into List Section

If you don't know CSS/JavaScript, you can add a Code Block at section above or under List Section, then we will give the code to move it.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
On 4/10/2022 at 6:53 AM, tuanphan said:

You can add a Code Block with anchor id. Then use CSS to move down Code Block into List Section.

Or use JavaScript to add a Code Block into List Section

If you don't know CSS/JavaScript, you can add a Code Block at section above or under List Section, then we will give the code to move it.

@tuanphan, I've asked this elsewhere, but do you know of a way in Fluid Engine to offset the anchor link and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window.

To explain what I'm trying to create:

  1. I have a page with multiple sections, and each section has its own full screen background image.
  2. In each section I have a button to link to the section below it.
  3. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor.
  4. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability.

Is it possible to stick that anchor to the beginning of the section? I can give the site and password if you wish to take a look.

In any case, THANKS!

Link to comment
On 2/8/2023 at 2:34 AM, watts-creative said:

@tuanphan, I've asked this elsewhere, but do you know of a way in Fluid Engine to offset the anchor link and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window.

To explain what I'm trying to create:

  1. I have a page with multiple sections, and each section has its own full screen background image.
  2. In each section I have a button to link to the section below it.
  3. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor.
  4. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability.

Is it possible to stick that anchor to the beginning of the section? I can give the site and password if you wish to take a look.

In any case, THANKS!

What is site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 3/9/2023 at 7:30 AM, carmellovision said:

Hi @tuanphan! Having same issue with Fluid engine. I'd rather have the link be positioned a but lower like in screenshot.  

From this page: https://www.widesense.net/

To this page (the anchor point): https://www.widesense.net/ai-services/#ev-trip

Any help is much appreciated!

Thanks!

image.png

Screenshot 2023-03-09 at 9.20.05 AM.png

Screenshot 2023-03-09 at 9.19.45 AM.png

Because your header is sticky, so it caused problem. You can consider disable sticky header on this page only by add this to Design > Custom CSS

/* All services page - disable sticky header */
body#collection-63e1d404a374a103c9829652 header#header {
    position: absolute !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hello!

Hope you can help me 🙂 

I can't figure out how to create an anchor link on my site. I dont have the "plus-icon" that is described in the video. I want the button that says "vis meg hvordan" to hop down to the section with my packages 🙂 That's the fourth section on my page.

I have found the squarespace id-finder and used that to create the links to the different sections, but it didn't activate the button. 

web page: www.authenticspaces.co 

Link to comment
22 hours ago, mariatv said:

Hello!

Hope you can help me 🙂 

I can't figure out how to create an anchor link on my site. I dont have the "plus-icon" that is described in the video. I want the button that says "vis meg hvordan" to hop down to the section with my packages 🙂 That's the fourth section on my page.

I have found the squarespace id-finder and used that to create the links to the different sections, but it didn't activate the button. 

web page: www.authenticspaces.co 

You mean click button > Scroll to this section?

image.thumb.png.f85db83dea0301f5c35f4de39d4984a3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

I'm having a similar issue with my anchor links working on some pages but not on others.

https://alpaca-cube-wwtr.squarespace.com/ (password: Paul1978!)

On the home page, the button link "Show Me" jumps to the section 'coaching as individual as you' (albeit I'd like it to jump to above that specific title).

But on https://alpaca-cube-wwtr.squarespace.com/method the "Learn More" button (configured the same way as the above working button) won't jump to the section "Swim Smooth’s 10 Tenets for Coaching The Swimmer, Not The Stroke".

Same issue on https://alpaca-cube-wwtr.squarespace.com/knowhow "Join the Blog" does not jump to the form on that page as intended.

Both the above mentioned pages are Blog summary pages, though I've tested another couple of "normal" pages and still have the same issue (https://alpaca-cube-wwtr.squarespace.com/new-page-3)

I wondered if it were a button formatting issue, but text links also don't work.

I'm very new to CSS, so am wondering if I've somehow added something in that has caused this issue, that said, I can't then understand why it works on the home page.

I've dearly love some help on this please 🙏 thanks! Paul

Link to comment
On 8/28/2023 at 4:45 PM, PaulSwimSmooth said:

I'm having a similar issue with my anchor links working on some pages but not on others.

https://alpaca-cube-wwtr.squarespace.com/ (password: Paul1978!)

On the home page, the button link "Show Me" jumps to the section 'coaching as individual as you' (albeit I'd like it to jump to above that specific title).

But on https://alpaca-cube-wwtr.squarespace.com/method the "Learn More" button (configured the same way as the above working button) won't jump to the section "Swim Smooth’s 10 Tenets for Coaching The Swimmer, Not The Stroke".

Same issue on https://alpaca-cube-wwtr.squarespace.com/knowhow "Join the Blog" does not jump to the form on that page as intended.

Both the above mentioned pages are Blog summary pages, though I've tested another couple of "normal" pages and still have the same issue (https://alpaca-cube-wwtr.squarespace.com/new-page-3)

I wondered if it were a button formatting issue, but text links also don't work.

I'm very new to CSS, so am wondering if I've somehow added something in that has caused this issue, that said, I can't then understand why it works on the home page.

I've dearly love some help on this please 🙏 thanks! Paul

Hi,

I see all three pages works to me. Did you solve, or if no, which devices do you use? Safari/Mac, iPhone or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/28/2023 at 5:45 AM, PaulSwimSmooth said:

I'm having a similar issue with my anchor links working on some pages but not on others.

https://alpaca-cube-wwtr.squarespace.com/ (password: Paul1978!)

On the home page, the button link "Show Me" jumps to the section 'coaching as individual as you' (albeit I'd like it to jump to above that specific title).

But on https://alpaca-cube-wwtr.squarespace.com/method the "Learn More" button (configured the same way as the above working button) won't jump to the section "Swim Smooth’s 10 Tenets for Coaching The Swimmer, Not The Stroke".

Same issue on https://alpaca-cube-wwtr.squarespace.com/knowhow "Join the Blog" does not jump to the form on that page as intended.

Both the above mentioned pages are Blog summary pages, though I've tested another couple of "normal" pages and still have the same issue (https://alpaca-cube-wwtr.squarespace.com/new-page-3)

I wondered if it were a button formatting issue, but text links also don't work.

I'm very new to CSS, so am wondering if I've somehow added something in that has caused this issue, that said, I can't then understand why it works on the home page.

I've dearly love some help on this please 🙏 thanks! Paul

I am having the SAME issues. I have a site that I built years ago and now the anchors work sometime and other times they jump to the bottom of the page and not to where they are linked.

Link to comment
On 9/7/2023 at 12:21 AM, lindz5223 said:

I am having the SAME issues. I have a site that I built years ago and now the anchors work sometime and other times they jump to the bottom of the page and not to where they are linked.

Can you share link to site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

The anchor scroll is decidedly not working.  

I've done this before so, it's not my "first rodeo".  

  • But now there is a bug and SQSP needs to fix.  All the elements are in place:  ex.   <div id="bogo"> </div>
  • Then the link on the button:  #bogo.

In preview works great.  Not when I open the home page through the browser.  

Try it.  I guarantee you it will loop to the top of the home page. SQSP needs to fix the damn bug.

https://www.cifdenver.org/#bogo

Link to comment

Ok, thought I was going crazy but seems others have experienced this issue. 

I've added anchor links (as per https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links) and basically when someone click's "Book" at the top of my page, I want the anchor link to take them to a form section on another page. 

On first click, it seems to work, but it's not in the right position (goes to the green section above the form section)

On second click (of the "Book" button) it lands perfectly where it should. I don't know why it's not working on the first click though!! 

Here's a screen video so you see what I mean: 
https://www.loom.com/share/6b53c08f689946dda8bbafaf42948c58?sid=6fb0eb9a-082c-45cc-9c4e-007c3fae3d34

https://houseofbubbles.squarespace.com/
password: bubbles

Any ideas?

Link to comment
On 9/22/2023 at 6:34 AM, holahannah said:

Ok, thought I was going crazy but seems others have experienced this issue. 

I've added anchor links (as per https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links) and basically when someone click's "Book" at the top of my page, I want the anchor link to take them to a form section on another page. 

On first click, it seems to work, but it's not in the right position (goes to the green section above the form section)

On second click (of the "Book" button) it lands perfectly where it should. I don't know why it's not working on the first click though!! 

Here's a screen video so you see what I mean: 
https://www.loom.com/share/6b53c08f689946dda8bbafaf42948c58?sid=6fb0eb9a-082c-45cc-9c4e-007c3fae3d34

https://houseofbubbles.squarespace.com/
password: bubbles

Any ideas?

Try changing button url to this

https://houseofbubbles.squarespace.com/the-bubbles-bar#book-now

or

/the-bubbles-bar#book-now

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks @tuanphan, that's the link URL I'm using: 
 

https://houseofbubbles.squarespace.com/the-bubbles-bar#book-now

 

It's strange, because on the first click of "Book Now" it still scrolls to the section above. Then if I click the "Book Now" button again, it scrolls to the correct place. But I don't know why it won't scroll to the correct place on the first click of the button. 

 

Screenshot 2023-09-26 at 4.08.37 pm.png

Screenshot 2023-09-26 at 4.08.45 pm.png

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.