Harjot Posted July 23, 2014 Share Posted July 23, 2014 http://www.scrolltotop.com/ Choose your button 1 copy the code2 paste to your site3 DONE!! Html :) Link to comment
aquaria527 Posted July 26, 2014 Share Posted July 26, 2014 (edited) I found the solution to hiding the button on mobile. You have to code several scroll buttons in the CSS Editor, for different configurations as follows: @media only screen and (max-width:3000px) { .scrollup { width: 60px; height: 40px; position: fixed; bottom: 50px; right: 100px; display: none; } } And then add these next two, but leave the brackets inside blank: @media only screen and (max-width:480px) {} This one works for slightly smaller screens like tablets or when the phone is landscape: @media only screen and (max-width: 1000px) {} Edited September 7, 2014 by aquaria527 Format code danielconz 1 Link to comment
Guest Posted September 2, 2014 Share Posted September 2, 2014 (edited) Where do I host the icon_top.png? Edited September 2, 2014 by Gozoslash Link to comment
victorstan Posted September 2, 2014 Share Posted September 2, 2014 (edited) You can host any additional files right inside the Custom CSS Editor Window. At the bottom right corner you will see two buttons, one of them says Custom Files (the one left to the Save button). Pressing it will open a side drawer and you simply drag and drop your files there. To link the files place your typing cursor where you want to the link to be inserted and just click on the file you uploaded. The url is automatically inserted. Hope this helps and let me know if you need more help! Edited September 2, 2014 by victorstan Link to comment
Guest Posted September 2, 2014 Share Posted September 2, 2014 Great ! That works just fine.Thanks a lot. Guillaume Link to comment
Henry06 Posted September 3, 2014 Share Posted September 3, 2014 As HammaadM stated: <a href="#" class="scrollup">Scroll</a> does the trick. However, I wanted to get my text to be centered, so I ended up adding some stuff to it and it ended like below: <div style="text-align:center"> <a href="#">Back to Top</a> </div> Link to comment
flint Posted September 22, 2014 Share Posted September 22, 2014 When I look at the mobile end my icon is all the way to the left side when on desktop it's on the right hand side anyway to fix the alignment on mobile? Link to comment
flint Posted September 22, 2014 Share Posted September 22, 2014 If I want the icon to be centered on the page in both desktop on mobile versions what CSS variants need to be changed?Right now with this code: .scrollup { width: 40px; height: 40px; opacity: 0.9; bottom: 25px; left: px; position: fixed; z-index:100; display: none; background: url('http://static.squarespace.com/static/53e29465e4b09d387c666792/t/541f7527e4b02b592c3dbdfd/1411347751880/scrollarrow.png') no-repeat;} It appears somewhat centered but slightly off to the right? Link to comment
Guest Posted February 12, 2015 Share Posted February 12, 2015 (edited) Question: I inserted this <a href="#">Back to top</a> into my footer, and it works great. However, some users are reporting clicking it takes them back to the home/splash page, not the top of the page. Thoughts on why it would work differently on different devices? Thanks! Edited February 12, 2015 by scottgreider Link to comment
neeklamy Posted February 12, 2015 Share Posted February 12, 2015 Could you post a link to the page where you’ve added this? The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
Guest Posted February 12, 2015 Share Posted February 12, 2015 www.dnfw.squarespace.com Again, all the pages work on my computer and mobile, but some don't work right on others computers/phones. Thanks! Link to comment
rockymv Posted August 6, 2015 Share Posted August 6, 2015 type FULL address for BLOGGER instead of just the '#': example : Link to comment
rockymv Posted August 6, 2015 Share Posted August 6, 2015 type FULL address for BLOGGER instead of just the '#': Scroll example : Scroll Link to comment
HeathersBerto Posted August 6, 2015 Share Posted August 6, 2015 (edited) Alright fellas! After researching for hours upon hours and scratching my head like mad, trying to get an icon to work without having to be a javascript wiz, here is the entire process completed in a single post (so easy a newbie can do it). Credit for the first half is given to those who came up with the coding in the first place! I just put all of the pieces together to make it extremely easy to add an icon for your scroll to top feature! Enjoy guys!! Edit the Footer Go to your site’s footer area Add a Code Block Make sure it’s set to HTML and the Display Source option isunchecked Add this code: <a href="#" class="scrollup">Scroll</a> If you don’t want any animation just leave it at this, but if you want some fading animation and the ability to EASILY add icons carry on and follow along! CSS Editor Go to the CSS Editor – to see how to get to it, take a look at Using the CSS Editor.Paste in the following:.scrollup { width: 60px; height: 40px; position: fixed; bottom: 50px; right: 100px; display: none; color: #7daed3;}Change the color to whatever you want!Page Header Code InjectionPaste this into your site’s Page Header Code Injection, for how to get to it see the article Using Code Injection: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> Now to add an icon! Paste the following code into the section of your site's HTML. Settings > Advanced > Code Injection <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> Now go to the following link: http://fortawesome.github.io/Font-Awesome/icons/ Scroll down until you see "Directional Icons". Click on an icon and Voila! Now go back into your footer and replace "Scroll" with whatever coding was given to you - the coding should look something like this - example: <i class="fa fa-arrow-circle-o-up"></i> Once you have selected your icon and when all is said and done, the html code in the footer (referring to the code block you created a few steps back) should now look something like this: <a href="#" class="scrollup"><i class="fa fa-arrow-circle-o-up"></i></a> Now if you want to take it a step further and modify the size of the icon, follow the instructions on this page and look under the area titles larger icons:http://fortawesome.github.io/Font-Awesome/examples/ And there you have it, all put together to make you look like a pro in no time! :D - Albert S. Hire me to create and design YOUR SquareSpace Website! OneWayDesignStudios@Gmail.comwww.TheHealthyCo.com Edited August 6, 2015 by HeathersBerto Link to comment
hammaste Posted October 9, 2015 Share Posted October 9, 2015 HeathersBerto's answer is by far the best. Just a small tip for those who are struggling to get the fontawesome icon on top of the hero images of some templates: the z-index of those hero images is set to 99 by default, so just change your fontawesome CSS z-index to 100 Link to comment
SharpDressedMan Posted November 4, 2015 Share Posted November 4, 2015 for the scrolling function, What determines when it will be shown on the page? I'm looking to adjust when it shows based on how far some scrolls down.,... Los Angeles SEO Expert & Content Strategist helping small business and e-commerce companies create website experiences that customers love. Free Contact me for a free consultation. Link to comment
minnerman Posted May 31, 2016 Share Posted May 31, 2016 The above "hide scroll button on mobile" does not do anything. I am adding it to the "sitewide" custom css. Is there not a way to simply target the scroll button on mobile and choose display: none? There is no point in having a scroll to top on mobile as it's so easy to scroll, and it gets in the way of clickable links and verbage. Thank you al Link to comment
minnerman Posted May 31, 2016 Share Posted May 31, 2016 This answer makes no sense to me... can you please explain where to put the other two @media only screen lines? I need help with hiding on mobile, because a back to top is pointless on mobile What does "codes several scroll buttons" mean? I have 1 image ('url') taking the place of the scroll up "black box", inserted into the custom css. I have the script in the code injection and the "class=scrollup code in the footer. it is functioning fine, I just need it hidden on mobile http://www.godbyhearth.com/ Link to comment
Guest Posted June 8, 2016 Share Posted June 8, 2016 This was so simple and easy! Thank you! I got it to show up at the footer section of my website. Is there a simple way to get it to float dynamically while scroll through a blog post? Link to comment
Guest Posted June 8, 2016 Share Posted June 8, 2016 Hello everyone! So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/ My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site. Thanks a bunch everyone!Wish I took more coding class back in school haha Link to comment
Guest Posted June 8, 2016 Share Posted June 8, 2016 Hello everyone! So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/ My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site. Thanks a bunch everyone! Wish I took more coding class back in school haha Link to comment
Johann_Okt Posted September 30, 2016 Share Posted September 30, 2016 (edited) But there is still one thing that´s a problem...You have to type one line more in your head. So that the complete Script part have to sound like this: <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100){$('.scrollup').fadeIn();} else {$('.scrollup').fadeOut();}}); $('.scrollup').click(function () { $("html, body").animate({scrollTop: 0 }, 600); return false;});}); </script> and than it should work ;D Edited September 30, 2016 by Johann_Okt Link to comment
morganlight Posted October 10, 2016 Share Posted October 10, 2016 Is there a way for me to apply this easily to all pages? Link to comment
Guest Posted December 22, 2016 Share Posted December 22, 2016 (edited) @expeditionjojo I had great success with this solution and the scroll to top button appeared on every webpage just as I wanted it to, but I've recently lost the button. It no longer appears on my site. Have you experienced something similar? ~Jon Edited December 22, 2016 by Jonsolotravels Initial Revision Link to comment
Guest Posted February 4, 2017 Share Posted February 4, 2017 Hey @jonsolotravelsI removed it from my site for a while since I couldn't get it working the way I wanted it to. I'm trying to do it again now. Any luck for you? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment