Scroll Arrow Indicator

Hi, 

I am wanting a simple 'scroll' down arrow on my squarespace 7.1 site on various pages. There used to be an option to have a scroll down icon on squarespace 7.0.

Can anyone help with CSS for this?

Michael

Add to Code Block

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

@tuanphan I used your code to make it a button to scroll to the next section. Save this for later when others need it.

https://jsfiddle.net/pelletr1/ae1o3qzg/10/

On 7/22/2020 at 8:08 PM, rwp said:

@tuanphan I used your code to make it a button to scroll to the next section. Save this for later when others need it.

https://jsfiddle.net/pelletr1/ae1o3qzg/10/

Thank you. Saved ❤️

How can you add a page jump to this scroll indicator? Say an user clicks on the scroll indicator and then it jumps to a specific section?

https://codepen.io/r-w-p/pen/ZEQwMoN

I moved my stuff to code pen, the new link is here.

On 7/22/2020 at 8:45 PM, tuanphan said:

Add to Code Block

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

 

Can I have 2 different colour arrows on the same home page? 

On my site uprisefinancial.com.au

I want a yellow arrow on the opening page but then further down on the services section I want a black arrow. When ever I change one it seems to change both of them. 

Appreciate any help. Ta

4 minutes ago, Gezza40 said:

Can I have 2 different colour arrows on the same home page? 

On my site uprisefinancial.com.au

I want a yellow arrow on the opening page but then further down on the services section I want a black arrow. When ever I change one it seems to change both of them. 

Appreciate any help. Ta

add abvoe code for arrow 1

add this code for arrow 2

<div class="scroll-down2"></div>
<style>
  .scroll-down2 {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

Legend!!! Thank you!!!

Hi there! Is there a way to swap out the actual arrow with an image?

On 7/22/2020 at 8:45 AM, tuanphan said:

Add to Code Block

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

 

On 9/29/2020 at 6:35 AM, BridgetKelley said:

Hi there! Is there a way to swap out the actual arrow with an image?

 

 

Can you share link to page where you inserted above code? We can try some CSS background image code

Only the arrow's left side is centered, not the center of the arrow. If you have smaller centered elements on the page this difference will show and look weird. 

To center it, you will need to subtract the arrow's width from the left position:

  left: calc(50% - 7px);

Thanks @tuanphan!

is there a way to stop the arrow from continuing to appear when the user has scrolled to the bottom of the page?  A curious user might otherwise wonder what lies beyond the bottom of the page.

On 10/8/2020 at 8:59 PM, mutant said:

Thanks @tuanphan!

is there a way to stop the arrow from continuing to appear when the user has scrolled to the bottom of the page?  A curious user might otherwise wonder what lies beyond the bottom of the page.

Can you share link to site where you apply above code? We can check easier.

Hi @tuanphan,

Can you share code of how you did the scroll indicators on the page below?

https://tuanphan.squarespace.com/scroll-indicator-link#tscroll

I'm looking to create both the middle aligned scroll down indicator and the scroll to "top" bottom at the very bottom of the page.

This is the page I would like to add those elements to:

https://rb4.squarespace.com/about

Password: RB4

Thx!

15 hours ago, joshroos said:

Hi @tuanphan,

Can you share code of how you did the scroll indicators on the page below?

https://tuanphan.squarespace.com/scroll-indicator-link#tscroll

I'm looking to create both the middle aligned scroll down indicator and the scroll to "top" bottom at the very bottom of the page.

This is the page I would like to add those elements to:

https://rb4.squarespace.com/about

Password: RB4

 

Thx!

 

Add a Code Block > Paste this code

<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>

With back to top button, use this guide.

On 11/22/2020 at 12:58 AM, tuanphan said:

Add a Code Block > Paste this code

<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>

With back to top button, use this guide.

Hey, I used the code but modified it to fit the aesthetics of my website. Is there any way to make the animation a bit faster so the opaqueness isn't too long when the arrow disappears? Here's the code I used: 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation:    fade_move_down 4s ease-in-out infinite;
    animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

Also, is there any way to be able to click on the arrow to guide the user to the next section 'Projects'? My website is www.tbias.design and the password is tory b. (all lower caps, space and period included). 

Hope to hear from you soon! 

On 12/1/2020 at 12:07 PM, greyelton said:

Hey, I used the code but modified it to fit the aesthetics of my website. Is there any way to make the animation a bit faster so the opaqueness isn't too long when the arrow disappears? Here's the code I used: 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation:    fade_move_down 4s ease-in-out infinite;
    animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

Also, is there any way to be able to click on the arrow to guide the user to the next section 'Projects'? My website is www.tbias.design and the password is tory b. (all lower caps, space and period included). 

 

Hope to hear from you soon! 

try change this

Quote

<div class="scroll-down"></div>

to this

Quote

<a class="scroll-down" href="next-section></a>

Next, add a Code Block in next section > Paste this code

Quote

<span id="next-section"></span>

How do you change the colour of the indicator?

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

On 2/11/2021 at 6:41 AM, Alexdouglas142 said:

How do you change the colour of the indicator?

 

 

<div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>

in border right & border bottom, you will see "red"

Change it to yellow, orange...or #f1f2f3,...

@tuanphanI used this code and managed to get what I been wanting to do for my desktop site. Thank you!!!

However, when I look at the mobile version the arrow is no longer centered. Is there a way to keep it as is on the desktop version, but center it on the mobile. Or maybe a way to disable it all together for the mobile, just leave it to appear on the desktop? 

On 2/27/2021 at 12:55 AM, 2scani said:

@tuanphanI used this code and managed to get what I been wanting to do for my desktop site. Thank you!!!

However, when I look at the mobile version the arrow is no longer centered. Is there a way to keep it as is on the desktop version, but center it on the mobile. Or maybe a way to disable it all together for the mobile, just leave it to appear on the desktop? 

Can you share link to page where you added the code? We can check easier

On 8/26/2020 at 8:25 PM, rwp said:

https://codepen.io/r-w-p/pen/ZEQwMoN

I moved my stuff to code pen, the new link is here.

Hey where do you put the JS and would the CSS go in Custom CSS?

On 3/17/2021 at 12:25 AM, AllanYung said:

Hey where do you put the JS and would the CSS go in Custom CSS?

CSS to Custom CSS, JS to Code Injection Header or Footer

@tunaphan the code has gotten rid of all the content on my home page, and i cant find a way to get it back, so maybe update this saying that there is a risk of that

EDIT: After deleting the section(with some difficulty) it put my content back, i guess it justhid/masked it