HeathersBerto

1) Header: Footer: 2) Add class="slideUp" to the code of any element you wish to animate on the page. i.e. 3) Replace 'slideUp' with 'slideLeft', 'slideRight' etc. Refer to Justin's page for all references.4) In custom CSS, add "visibility: hidden;" to the style of the element you wish to animate (It will disappear temporarily!)page-559a88fbe4b02af487910a44{ “visibility: hidden;” }5) Add a code block anywhere on the specific page you wish to animate on, and set it to Markdown.6) Add the following code to the block: 7) Change the reveal settings for the elements by tweaking the -100 and -250 (can be changed to +400, etc) depending on when you'd like to see them, but these settings worked for me.8) Add the same script for each element, changing the ref ID, and keep all within the same script brackets.9) Chaching! Do I have everything in the right order? Please make the corrections so everything is all put together. I tried to put both of your answers together and have gotten a bit confused.. Thanks!!

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