Scroll Back to Top Button in Squarespace

Подписаться 4,5 тыс.

Просмотров 16 тыс.

50% 1

Let’s build a floating "Back to Top" button in the bottom right hand corner of your website. If you just want the code, check it out on my website link below.
Code: www.will-myers.com/articles/b...
Enhance your website - Shop the Plugin Store
www.will-myers.com/products
Grow Your Skillset - Learn CSS for Squarespace Course
www.will-myers.com/learn-css-...
Stay up-to-date - Join the Newsletter
www.will-myers.com/newsletter
=============
Description:
In this tutorial, I'm going to build a floating Scroll to top button in Squarespace. We're going to make it appear only after we've scrolled down a little bit. This video will walk you through, step-by-step, how to build it.
=============
Additional Links:
Donate (buy me a coffee) - www.buymeacoffee.com/willmyers
Facebook: / willmyethewebsiteguy

Наука

Опубликовано:

12 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@abi-at-WillMyersSupport 2 года назад

Hi all, in an effort to provide quicker responses to your comments, we need to update this channel to a “Brand” account. Unfortunately this means any previous comments left by Will are going to be deleted.

@jessicamanapul 2 года назад

This was so helpful! Thank you for also explaining what each new line of code / property is actually doing.

@sashamarie071 Год назад

Amazing! Been searching for a way to do this for months, and the easy builder you have on your website made it so simple! Thanks so much!

@grubedoo 3 года назад

Awesome video. Love your tuts!

@awakencollective1639 3 года назад

I've never dabbled in code ever before but by following your instructions, it actually worked on my site! Thank you so much Will!

@hyeonzurita6981 2 года назад

This was super helpful. Thank you, Will!

@kondjanegongo796 3 года назад

Just made my fisrt site that has anchor points in the nav and this helped a ton. Much appreciated

@SEVENUP8000 3 года назад

It was very useful thank you!

@LA-Creative Год назад

This is great. Thank you!

@jolodesiderio 2 года назад

Hey man I recently bought your tabbed content plugin then ended up watching another tutorial from you. I would gladly pay for this plugin as well. Keep up the great work!!!

@Coco-xi9hq 2 года назад

dooood you rock. thanks

@abi-at-WillMyersSupport 2 года назад

Glad it helped!

@taliaeylon3044 3 года назад

Thank you! Works great! (Will has updated the code on his website.)

@TimCresswell 3 года назад

This is great - added it to the site header code + CSS + smooth scroll, tailored the colours and now have a nice button across my Squarespace 7.1 site + works well on mobile.

@TimCresswell 3 года назад

As Will commented further down, I've removed the 'div ID' at the top and the 'href' and added the following to the bottom of the script: $('#back-to-top').on('click',function(){ $(window).scrollTop(0); }) This works just the same, but even better as no #tag is added to the site address when the button is used! :)

@ginaenglish1009 3 года назад

Hi there, can you tell me how you were able to get the button to appear on multiple pages? I tried injecting the CSS into the Header Area under Settings (advanced) tab, but it didn't work. In fact, it made the original button disappear on the home page so I deleted that step. I'd appreciate the help! :)

@guitarjackinthebox 3 года назад

This is awesome Will, thank you! I've implemented this across a number of sites now, it makes a really subtle but BIG difference to navigation IMO. One question - when you do click the nav button created in this tutorial, you change the visible URL to include /#scroll-here. Any thoughts on how I could prevent/hide the addition to the URL, so as not to distract the site user?

@znavyu6307 3 года назад

It works great and looks amazing. This is the first video I found where it works for my site properly, so thanks so much! One minor thing, I notice any time someone clicks the button on my site, it puts the "/#scroll-here" in the URL. That is the hyperlink reference (href). Is there a way to take that off?

@meganperi6804 3 года назад

Thanks for the video? Does this work with templates that have index pages?

@Luxaeons 2 года назад

Question if anyone knows the answer: the scroll back to top button for me only works once (when you click it) and when you scroll down again it doesn't work, you have to refresh the page again for it to function again.

@sketchninja7005 3 года назад

Hi, thanks for your content! It looks awesome, especially when the background is transparent. I have a small issue with my back to the top button. It works fine, but just on the "clean page", if I start to scroll back and forth and then try to click on the button, its not working. Its also not working if I just add a simple code into the page, same issue there. many thanks

@alouciaadmettre2981 3 года назад

Great video! Is this also mobile responsive?

@annanativ4047 3 года назад

Hi Will! This was such a helpful tutorial video, thank you so much!!! Is there also a way to increase the arrow opacity when scrolling down the page so that it reaches full opacity at the end?

@annanativ4047 3 года назад

@@will-myers Ohhh this is awesome, thank you so much! Appreciate the link. Definitely a challenge but will look into this and give it a shot.

@gwenlotus245 3 года назад

Big thnks Will. my used script is more complex and not good like ur button. So I've changed it with ur script. BTW is there any more good website for icon collection like OrionIcon?

@christopherdickens1545 3 года назад

Hi Will, Love your videos always so easy to follow. One question, is there a way to have the 'function checkScrollPos' looking at how far the viewer is from the bottom rather than how far they are from the top? I'm trying to make it so that the BTT button shows when I hit the footer and obviously all my pages are different lengths so I feel it would make sense to give a distance from the bottom to look for to trigger the function. Thanks.

@christopherdickens1545 3 года назад

@@will-myers Hey this worked perfectly thanks! I am still running to an issue however. It works well and smoothly takes me back to the top of the page but if I then scroll back down to click on it again nothing happens. it seems it only works one time until I refresh the page. what might be causing this? Thanks

@GeneVarnado 2 года назад

@@christopherdickens1545 Did you ever get an answer to this? I'm having the same problem.

@mbascunanc 2 года назад

Hi Will, I have found your code and have applied this to the website, on the first click it works really well but if I scroll down once more, the button does not seem to work. I would greatly appreciate your help :) Great tutorials by the way!

@BookMyWeddingBand 3 месяца назад

Hey Will. Really love your content! Thank you so much for all you are sharing. I wondered if you have any any knowledge on how these anchors are behaving on mobile/cell phones. Once the anchor button is clicked it works fine. But then if i try and scroll away from where the anchor took me.. the mobile/cell keeps trying to snap back to where the anchor button took me. Again.. only on phones does this happen. Fine on desktop. Do you know of a way to stop this from happening on phones? Thanks in advance.

@will-myers 3 месяца назад

Hey, if you're able to reach out via the Support page on our site we can take a closer look.

@UksoccerPrograms 3 года назад

Hi Will, love the video content. Quick question, for some reason the design is great and the arrow comes up when you scroll down the page, but the actual function on the button is not taking it back to the top of the page. Anything I should be looking out for? Many thanks in advance.

@davidbieloh1382 2 года назад

the same happens with mine

@user-tb5go3zt7v 4 месяца назад

Hi thank you a lot for this helpful tutorial! Is there a way to make the button scroll a bit above the footer when it reaches the bottom of the page? So that the button is not on top of the footer but above it?

@will-myers 3 месяца назад

Hey, you can adjust the buttons positioning in Step 2 of the article (linked in description).

@jefrizelle 3 года назад

Just built this on a separate non linked page like you did but now how do I move the back to top button to the home page or other pages?

@martinpinessi2433 2 года назад

I'm interested in your Squarespace course, is there any promotion or discount code rn? Thank you so much!

@hossamg1493 3 года назад

Hey so I implemented this on my 7.0 site (Brine), the code works fine in the editor mode but the button doesn't appear on the live site until I scroll all the way to the bottom of the page. Any reason why that could be?

@MindofAIexander 2 года назад

Hey Will! Thanks for this awesome video! It was a lot of help. Quick question, whenever I click the "back to top" button the URL of the website changes to add a "#scroll-here" at the end. Is there a way to fix this? Let me know, thank you!

@MindofAIexander 2 года назад

@@will-myers Thanks for letting me know! It works great now! I appreciate the response :)

@jcparedesc 3 года назад

Congratulations! Great video! Quick question: How can I place this button in the entire website? Not only on one page?

@jcparedesc 3 года назад

@@will-myers thanks! The entire code including java?

@jcparedesc 3 года назад

@@will-myers thanks! I’ll give it a try

@hsamrai4516 3 года назад

Hey Will! Is it possible to replace the orion icon with a lordicon icon as an svg? Your code works great but does not fit my brand. The Lordicon lets me customise the colours of the arrow but just not sure how it works as an svg not an img? I tried replacing what you added in the code but alas it did not work.

@keithlynn5858 2 года назад

@@will-myers I had a similar query. Im not pushed about the LordIcons animation element. I figured the animation would be triggered on hover, but it seems the animation is constantly running which seems to be very distracting for users while they're trying to read content! But what got me interested in those LordIcons is they allow you to change the colours and weight of the lines on their end and that's what I'm after. I need to customise the look and feel. Have you considered sharing a version of the code that allows you to easily manipulate the colour of the button and the shape inside it? I tried to do it myself by going with the LordIcons but could not follow what you meant here.

@sydneyaddis817 3 года назад

Hey Will! I have two questions. My client wants this on every single page of the site, how do I have it apply to everything instead of pasting the code each and every time? Second, it won't work on the shop page and I am not sure why.

@deipty222 3 года назад

I cannot use code injection since its a personal acc. How do I add the jquery?

@studiodrivenbylight 2 года назад

Hey, thank you! I like to position the arrow in the center and use my own image for the arrow. Could you please tell me how? Best

@studiodrivenbylight 2 года назад

@@will-myers Center works! Thank you. How do I upload an image to Squarespace and then link to it in the HTML?

@studiodrivenbylight 2 года назад

How can I let the arrow start showing only at the bottom?

@studiodrivenbylight 2 года назад

@@will-myers Fixed it, thank you

@davidbieloh1382 2 года назад

This isn't working for me in Safari. The button will work sometimes, and not others. Thoughts? Thanks!

@Jose_Irizarry 3 года назад

Hi. I followed all the instructions, twice! I only get the vertical scrolling bar on the side but no icon at the bottom. I don't know why.

@Jose_Irizarry 3 года назад

@@will-myers Hi Will. I just sent you an email. Thank you.

@andrewpardue1005 Год назад

Hey I have the button styled and everything is there visually but the interaction when you click it doesn't do anything? I'm not sure what I'm missing. Just commenting as a ditch effort to resolve this because I just can't go back and forth with the code anymore.

@abi-at-WillMyersSupport Год назад

Hey Andrew, if you reach out to us via the Support form in our website footer we can take a look at this for you!

@buuraors Год назад

i insert all the code. but when I click it doesn't get back to top. nothing.

@abi-at-WillMyersSupport Год назад

Hey, we'd need to see the site in order to troubleshoot this, could you send over a link?

@topnotchshorts7617 2 года назад

Hey mate! I left you a comment about an issue with this button on your post, on your website about this. Can you please check that out? Thank you!

@topnotchshorts7617 2 года назад

@@will-myers Thank you! That worked! Love your videos! Keep it up!! Have a good one.

@calmbuddha00 Год назад

Somebody please guide me how to do this!

@abi-at-WillMyersSupport Год назад

Hey, thanks for watching! Which part have you got stuck on?

@calmbuddha00 Год назад

@@abi-at-WillMyersSupport sorry to say but all of it, is there a simple way? like on the link i can see HTML JAVA and CSS where to just copy and paste them? LIke a quick guide

@abi-at-WillMyersSupport Год назад

@@calmbuddha00 The HTML & Javascript needs to be placed in the Page Header Code Injection Area and CSS in the Custom CSS panel, let us know if you have any other questions.