Scroll Down Arrow

Hello,

I've been trying to find a way to add a scroll down arrow to my pages, but no luck.

I'd like it exactly like this example: http://steven-banks.com/

I'm on the personal plan, so looks like code injection isn't an option, is there a way to do this with css?

site: samfiskdesign.co.uk

password: sfd123

Thanks,

Sam

Try this thread:

@Ziggy

Hello,

Thanks - I tried that way (with code block) but doesn't seem to be working for me. Just showing as plain text on my site.

Also, supposedly this results in a 'round box with 2 lines going down' according to OP, I'd like an arrow similar to my example if possible!

You need to uncheck the "Display Source Code" on the code block.

@Ziggy Appreciate your help, thanks. That works - realised I had the drop down set to css not html.

One more question, is there a way to add a smooth 'scroll' transition when I click on the arrow? (Currently it just jumps to the next section)

This is the code I'm using:

Quote

 

<div class="bottom">
  <a class="scroll-indicator" href="#tscroll"></a>
</div>
<style>
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  text-align: center;
}

.scroll-indicator {
display: inline-block;
  width: 24px;
  height: 24px;
  margin: 16px auto;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  border-bottom-right-radius: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>

 

Hey Ziggy,

I'm trying to apply the Custom Code in my site (https://silver-star-fphr.squarespace.com / password: jimparker) but it says there's a Syntax Error in line 38 (the first line of the code) - screenshot attached.

This is what I pasted in the Custom Code section, am I doing something wrong?

Thanks so much.

<div class="bottom">
  <a class="scroll-indicator" href="#tscroll"></a>
</div>
<style>
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  text-align: center;
}

.scroll-indicator {
display: inline-block;
  width: 24px;
  height: 24px;
  margin: 16px auto;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  border-bottom-right-radius: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>

4 minutes ago, JParker1570048365 said:

here's a Syntax Error in line 38 (the first line of the code) - screenshot attached.

This is what I pasted in the Custom Code section, am I doing something wrong?

You are adding HTML to the CSS field, add it to a code block on one of your pages.

Thanks for your reply Ziggy.

It's now positioned below my gallery slideshow in the code block - but I'm trying to make it appear exactly like the arrow is on this page - http://steven-banks.com/

Where it is sitting over the image  at the bottom with an anchor link taking you down to the next section on the page.

I'm lost on achieving this and would really appreciate any help!

Thank you so much.
Jim

Given you have a gallery at the top, you'll need a different solution as you can't add the code block where you need it. Try this:

https://www.websitebuilderinsider.com/how-do-i-add-a-scroll-down-arrow-in-squarespace/

Hi Ziggy,

Thanks so much. It's still not working unfortunately - I've attached the code I entered in the page header code injection area.

Maybe I'm still doing something wrong?!

Hmmm, not sure, maybe try this solution?

https://forum.squarespace.com/topic/176719-how-do-i-make-the-scroll-down-arrow-on-my-homepage-clickable-and-to-scroll-down-to-the-section-below/#comment-420436

Hi Ziggy,

Wow thanks so much for your help!!!! It worked! I customised it a bit too and it's perfect now. I really appreciate your time Ziggy!!!

Have a great day!
Jim

Awesome! Glad one of those worked for you!

hello - i've just used this code and it's worked brilliantly thank you. Is there a way to make the arrow thicker/change it's weight so it is bolder on my page? Thanks

34 minutes ago, rachyb said:

hello - i've just used this code and it's worked brilliantly thank you. Is there a way to make the arrow thicker/change it's weight so it is bolder on my page? Thanks

You should be able to adjust this by increasing these values from 1px to 2px:

border-left: 1px solid #fff;
border-bottom: 1px solid #fff;

7 hours ago, Ziggy said:

You should be able to adjust this by increasing these values from 1px to 2px:

border-left: 1px solid #fff;
border-bottom: 1px solid #fff;

worked perfectly - thanks!