A Scroll hint that fades out when the page is scrolled down

Scripting & Styling
Written By Colin Irwin

More in Plugins, Scripting and Styling

This is a quick solution I just programmed for a client that allows displays a down arrow "scroll hint" locked to the bottom of the browser window that slowly fades out as the page is scrolled down and  quickly fades back in if the page is scrolled back to the top. 

The solution is a combination of jQuery code and custom CSS. 

Remember: You'll need a link to the main jQuery library as the first item in your sitewide header injection point for the code below to work. If you already have the link to the main jQuery library you can skip to The jQuery Code, below. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The jQuery Code

<script>
$(window).scroll(function(){
    offset = $(this).scrollTop();
    if (offset > 100) {
        $("body:not(.scrolled)").addClass("scrolled");
   }
   else
   {
       $("body.scrolled").removeClass("scrolled");   
   }
});
</script>

The Custom CSS

body:before {
   font-family: "squarespace-ui-font";
   content:"\e009";
   position:fixed;
   bottom:0;
   width:10%;
   text-align:center;
   z-index:1000;
   display:block;
   color:#333;
   font-size:6vw;
   background-color: rgba(54, 64, 36, 0.5);
   margin-left:45%;
   margin-right:45%;
   padding:.3em .1em;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -ms-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;

 }

 .scrolled:before {
   -webkit-transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -ms-transition: opacity 2s ease-in-out;
   -o-transition: opacity 2s ease-in-out;
   opacity: 0;
 }

For my life, I cannot figure out where to put the different pieces of code. I'd love to have this on my homepage.

how can you change the colour to white?

The effect is not fading out, any tips for how to fix this?

How do you add the jquery??

I'm a complete novice in Squarespace and coding and got this to work!!! Thanks so much all.

Thanks for this feature...
Just trying to expand on it, without any success...

I want to use this for Mobile sites, where TEXT is in a Div that scrolls when the content is auto scrolling within a div id="scrollText"

Not familiar with JS, but have tried to change the JS function from Window to the Div.
But cannot get this to work, perhaps wrong approach, or I am very close, but have missed a coma or something.
Any advice?

I second Jason's comment - I've got this working great site-wide, but I just need it on the homepage. I'm working in squarespace. Thanks!

I should think a little before I ask! I figured it out! answer is in reply to Jason below...

Is there a way to do this only on the front homepage / index page? instead of site wide?

I got it to work! For squarespace I have the jQuery link and code in the site-wide injection, just in case I ever want this site-wide. But to have it only on the hompage I put the custom CSS in the page header code injection for the homepage (go to Pages, Home,click the cogwheel, Advanced) surrounded by <style></style> - this indicates that it's CSS. Good luck!

hi, this is great for my site and it looks really good, however, i still can't get it to fade and i've tried everything i can think of. could you help?
thank you :)

This is how to do it.

Sitewide Code:
settings > website > advanced > header code injection. Put code on line 1.

JQuery Code
Homepage > click cog wheel > Advanced > use the following code:
<script>

$(window).scroll(function(){ offset = $(this).scrollTop();

if (offset > 100) {

$("body:not(.scrolled)").addClass("scrolled"); } else { $("body.scrolled").removeClass("scrolled"); }

}); </script>

3: CSS
Design > custom CSS

It works beautifully on my home page but is not working on my other pages. Can you help me?

Doesn't work for me. Put the main jQuery library in code injection, put css in custom css and I can see the arrow, but as for the jQuery itself I've tried it in the code injection, in the page header, and on the page itself, none result in the arrow fading upon scroll. Any suggestion? Where does the jQuery code go?

I have worked out how to do it - Thanks for this article it was really really helpful.

Hi - Thanks so much for this. The only thing is, my down arrow is surrounded by a greenish box - the colour interferes with one of my initial pictures on the page and I would like the surrounding box to be white - would you be so kind as to let me know how to do this?

I would be most grateful,

Thanks,

Issy

Change background color in the custom css

background-color: rgba(54, 64, 36, 0.5);

to, say

background-color: rgba(255, 255, 255, 0.5);

Any reason why it wouldn't be fading out?

Where should the jQuery code be entered? I have the inital sitewide code injected, does the following jQuery go in the same place?

Hi Colin
Thanks, this is exactly what I need. However , I'm not having much luck getting this to work.
I see there are three sections of code - could you please help me and be explicit where each bit gets pasted please?
e.g Settings/Advanced/Code Injection or
Design/custom css
or?
Thanks Colin
Ps got the sideshare buttons working , they're great

How do we link to the main library?? Not sure what this means.

Hi Gillian,

I have added a clarification in the article.

Colin Irwin

I’m Colin Irwin, a freelance Squarespace Designer & Developer based in London, UK, with clients in the USA and around the world.

I’m a recognised Squarespace expert. I design and build Squarespace sites for everyone from charities and start ups to major established brands.

https://www.silvabokis.com
Previous

A Google Analytics filter that improves on the "Search Term Not Provided" message
Next

Squarespace CSS rollover effects triggered by character sequences in ALT tags