How to Smooth Scroll to Landing Page sections using Squarespace 7.0
Вставка
- Опубліковано 4 лип 2024
- (Using Squarespace 7.1? Find the new tutorial here: • Squarespace Fluid Engi... ) In this video I’m going to show you how to get that sweet Smooth Scroll action in a Landing Page using Squarespace.
This means when a visitor arrives, they click a button or navigation link and it takes them, gracefully, to the information they are after in the long-scrolling page.
It’s a common question I get asked so I want to show you how easy it is to achieve - without coding knowledge. There are essentially two methods and I cover them both in this video with interactive screencasts and also in this accompanying article with screenshots:
onepagelove.com/smooth-scroll...
Tutorial: How to create a unique Landing Page design using Fluid Engine
• Squarespace Fluid Engi...
Tutorial: How to setup Squarespace Member Areas & monetize your content
• Squarespace Member Are...
10% Off Coupon: OPL10 ###
onepagelove.com/opl10
Squarespace has been kind enough to give viewers the exclusive coupon OPL10 for 10% Off your first website or domain purchase. There is a free 14-day trial with no credit card needed, so you can try risk free.
Hey! I'm Rob Hope ##
Website: robhope.com
Twitter: / robhope
![Squarespace How to Create A Blog [Ultimate Step-by-Step Guide]](http://i.ytimg.com/vi/-LRvhgP5AXo/mqdefault.jpg)
![Squarespace How to Create A Blog [Ultimate Step-by-Step Guide]](/img/tr.png)
This worked perfectly! Thanks for the quick and simple info.
Cheers Matt - stoked you found it useful! :)
Thank you Rob! Works like a charm!
Glad it was helpful David:)
Just what I was looking for! Thanks a lot!
Glad you found it helpful Jamy! :)
Just what I needed. Thank you.
Glad it was helpful Joe! :)
Searching how to smooth scroll, your video was the winner because of your voice
Thanks for the kind words Cicely - it's a good mic ;)
Thanks so much! Just what I was looking for.
My pleasure - glad it was helpful!
Thanks for sharing!
Perfect!!! Thank you!
Glad it was helpful Jonathan! :)
brilliant !! .. thanks for taking the time to show us :))
Really glad you found if useful Nadia! :)
I was looking for this particular tutorial, I am glad I encountered your tutorial at first. I got to know exact thing I needed to.
That's is great to hear, it's really easy once you know but tricky if you start in the wrong areas:) Thanks for the comment Roronoa! ~ Rob
You're welcome. But I encountered a problem. Every time I add a section, a banner place takes in place as well. Since I am not gonna use a banner at every section, like you didn't. How am I gonna delete that banner space? I am unable to delete, remove. Would you kindly tell me? It will be super helpful.
Hi Roronia - I'm not totally sure of the issue your have explained. I'd definitely recommend chatting to the Squarespace support team about this. They are super helpful and will be able to point you in the right direction! Good luck:)
Thanks. I will contact them then. ^...^)/
Thank you so much! It worked perfectly. :)
Glad it was helpful Amanda! :)
Thanks, this is great!
Glad you found it useful! :)
thanks really useful !!
Glad you found it useful Andy!
The Code Snippets are found here: onepagelove.com/smooth-scroll-with-squarespace - shout if you have any issues or questions:) Update! Find my brand new Fluid Engine long-scrolling Landing Page tutorial here: ua-cam.com/video/GjZ6PMhQD8U/v-deo.html - includes Smooth Scroll header navigation with code🙏
Love it. Thanks for the info!
Glad you found it helpful Zoe! :)
@@RobHope but in mobile version when i click in the link it remains on the menu
@@shamseel101 Hi Shamseel - if you're using Squarespace 7.1 Find the new smooth scroll tutorial here: ua-cam.com/video/oqAl-8Py2pg/v-deo.html
Thanks :)
Glad you enjoyed it! Just published another on achieving Parallax Scrolling: ua-cam.com/video/4e5poedWGG4/v-deo.html :)
South Africa for the win!
Howzit!
Hi there! I've been trying to figure out how to have a page with smooth scroll and came across your 7.1 tutorial first and then saw this one. So helpful, thank you! Is there an easy way to know which templates allow for smooth scrolling? Also, I'm currently using 7.0; do you think it is worth changing over to 7.1?
Thank you this works but it only seems to work once, so if you scroll back up and hit the button again nothing happens... any ideas?
This was awesome. Is there a way to change the offset of the scroll distance? I have a fixed or sticky site header that covers up the section heads that the scroll link goes to. If it could stop scrolling a bit shy of the inserted "scroll to" bar it wouldn't get covered.
Hi Wayne - the best way to do this is add a spacer above the heading of the section. Then add the code snippet above that spacer. I'm busy with a new tutorial on how to achieve the smooth scroll using Squarespace 7.1
Hey, great vid thanks! Is there any way to have the button(s) stay in place when it scrolls? That is, the buttons don't scroll, so you can always see the links to the other sections?
Hi Mark - I'd definitely recommend chatting to the Squarespace support team about this. They are super helpful and will be able to point you in the right direction! Off the top of my head you would start with a template with a button in the fixed header, else somehow change a navigation link to the button.
Is it possible to do this with a hyperlink (underlined word instead of button?)
Hi Edith - yes it works exactly the same! To start, insert "text" instead of a "button" (I assume you are there already), highlight the word and just like you'd link out to google.com you'd use a hashtag #section - let me know if that is unclear!
How would you modify the code to be able to work for both text AND picture link imbeds?
Hi Nathaniel - are you wanting to kick off Smooth Scroll by clicking on an image?
hi there, i cannot get this to work. I have everything set up the same as you except when i get to the the clickthrough URL section I don't have the option for "external" and I can't get smoothscroll to enable
solved using the 2nd method but i needed a higher subscription tier.
@@Lachie55 Apologies for the late reply - thanks for letting me know with the follow up comment, glad you are sorted!
I don't even get the external option 😞
Hi La Shana - if you are using Squarespace 7.1 check out this video: ua-cam.com/video/JXBj_4ubmW4/v-deo.html