Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Nondas

Anchor link scrolling

Question

Hi there community,

 

Do you have any advice on how to make anchor links scroll gradually (slow scroll instead of instantaneous) to target page content? Thanks!

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0
html {
  scroll-behavior: smooth;
}

Design -> CSS


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

thank you! I have tried it, but don't se a real difference in scrolling speed. Still goes to target very fast. Anything else I could potentially try out?

 

Could it be because I'm using it on the homepage?

 

Edited by Nondas

Share this post


Link to post
  • 0

Is it scrolling at all?

You can't adjust the speed with css.

Can you post a link to your page?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

With CSS, that is the only option. It can be customized more with javascript.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hi rwp — I finally made it work, thanks so much for the help! I was wondering whether you have any ideas of making the following final fix: when clicking on the anchor link the page goes to the target, but as the top bar follows the vertical scroll, it hides the section title. I have added some spacers to counter that, but it looks weird having space without content. Any remedies?

Thanks again,

N.

Share this post


Link to post
  • 0

Do you have a business plan (or commerce plan) with squarespace?

Is this 7.0 or 7.1?

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hi rwp — I finally made it work, thanks so much for the help! I was wondering whether you have any ideas of making the following final fix: when clicking on the anchor link the page goes to the target, but as the top bar follows the vertical scroll, it hides the section title. I have added some spacers to counter that, but it looks weird having space without content. Any remedies?

Thanks again,

N.

Share this post


Link to post
  • 0
Posted (edited)

I will check it out shortly.

Send me a PM with the link.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...