Scroll Arrow Indicator

@michael_t_music

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@tuanphan what code injection would you put if you wanted the section to remove once scrolling? Thanks in advance!

On 8/12/2021 at 2:25 AM, sheasdesign said:

@tuanphan what code injection would you put if you wanted the section to remove once scrolling? Thanks in advance!

Hi. "section to remove" Can you explain clearly this?

On 7/22/2020 at 5: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>

 

Hi @tuanphan , I used the above code but I am unable to scroll to the next section using this arrow. 

here's the url:

https://www.divyachunduru.me/

@tuanphan

Site URL: https://www.awarecanada.com

Passcode to site is: Woods

The first scroll down arrow on the page (above the fold) is fixed but the second one on the "new releases" section moves (despite using the same coding) depending on screen size, why is this happening and how do I get it to stay just above the bottom of the image? 

13 hours ago, cynicxl said:

@tuanphan

Site URL: https://www.awarecanada.com

Passcode to site is: Woods

The first scroll down arrow on the page (above the fold) is fixed but the second one on the "new releases" section moves (despite using the same coding) depending on screen size, why is this happening and how do I get it to stay just above the bottom of the image? 

 

Hi,

2 hours ago, tuanphan said:

 

Hi,

You added code to Code BLock or Code Injection?

I added it to code injection, just tried code block and it seems to be working now. Thank you so much Tuan.

Hi 👋

I added the code to a code block in a section on my website. It's not working. It's just showing the actual code.... See attachment of what I want and what is currently happening. Id also like the "Scroll to Discover" to be clickable and it anchors you down to the next section.
 

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

9 hours ago, CarinaG said:

Hi 👋

I added the code to a code block in a section on my website. It's not working. It's just showing the actual code.... See attachment of what I want and what is currently happening. Id also like the "Scroll to Discover" to be clickable and it anchors you down to the next section.
 

<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 Code Block, uncheck this option

Display Source Code

On 3/1/2021 at 10:19 PM, tuanphan said:

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

Hi @tuanphan same mobile issue here - arrow not centered.

https://devstanbury.squarespace.com/?password=sneakpeek

Thanks,

Roland

On 9/21/2021 at 3:13 AM, RolandFuseHub said:

Hi @tuanphan same mobile issue here - arrow not centered.

https://devstanbury.squarespace.com/?password=sneakpeek

Thanks,

Roland

It looks like you solved?

Hi.

I have used the code in the introduction to add an arrow to my website. I would like to replace the arrow with the following image: https://static1.squarespace.com/static/61b3139e81c1617fe26fca37/t/61e954d5be75330fd18f561f/1642681557218/Prikker.png

I want two dots on the picture, and two dots on a white background.

The image should also be static without movement.

Can anyone help with this?

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 3px solid #eda005;
  border-right: 3px solid #eda005;
  z-index: 9;
  left: 10%;
  -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>

17 hours ago, Thomasaamodt said:

Hi.

I have used the code in the introduction to add an arrow to my website. I would like to replace the arrow with the following image: https://static1.squarespace.com/static/61b3139e81c1617fe26fca37/t/61e954d5be75330fd18f561f/1642681557218/Prikker.png

I want two dots on the picture, and two dots on a white background.

The image should also be static without movement.

Can anyone help with this?

 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 3px solid #eda005;
  border-right: 3px solid #eda005;
  z-index: 9;
  left: 10%;
  -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 you share link to page where you added arrow? We can check & give exact code in your case

53 minutes ago, tuanphan said:

Can you share link to page where you added arrow? We can check & give exact code in your case

The page is https://www.ergon.no/ and the password is: passord

On 1/21/2022 at 1:49 PM, Thomasaamodt said:

The page is https://www.ergon.no/ and the password is: passord

edit this line

Quote

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

to this

<div class="scroll-down"><img src="https://static1.squarespace.com/static/61b3139e81c1617fe26fca37/t/61e954d5be75330fd18f561f/1642681557218/Prikker.png"></div>
  

and edit style code to this new style code

<style>
  .scroll-down img {
    width: 30px !important;
}
  .scroll-down {
    -webkit-transform: unset !important;
        -ms-transform: unset !important;
            transform: unset !important;
    border: none !important;
}
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 3px solid #eda005;
  border-right: 3px solid #eda005;
  z-index: 9;
  left: 10%;
  -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 8/27/2020 at 1:25 AM, rwp said:

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

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

Hey @rwp & @tuanphan,

Thanks for all the help so far!

I'm trying to combine your codes so the .scroll-down indicator becomes clickable and smooth scrolls to the next section but it does not seem to be working.

I'm working on this site: florianbrooks.squarespace.com PW: florian

I've added the HTML to a code block, the CSS to custom DESIGN > CUSTOM CSS and the JS to page header code injection. I also tried amending the JS code from this:

$('.scroll-down').click(function() {
  $('html, body').animate({
    scrollTop: $('section').next().offset().top
  }, 1000);
});

to this:

<script>
  $('.scroll-down').click(function() {
  $('html, body').animate({
    scrollTop: $('page-section').next().offset().top
  }, 1000);
});
</script>

Here is all the code I am using for this so far:

CSS:

/* === SCROLL BUTTON ================ */
.scroll-down::before {
    content: 'SCROLL';
    position: absolute;
    transform: rotate(-45deg);
    top: -70%;
    left: -165%;
  }

  .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: 25px;
  height: 25px;
  border-bottom: 3px solid #D2B87A;
  border-right: 3px solid #D2B87A;
  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; }
}
/* === END SCROLL BUTTON ============ */

HTML (in a code block):

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

JS (in page header code injection):

<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- END JQUERY -->
<script>
  $('.scroll-down').click(function() {
  $('html, body').animate({
    scrollTop: $('page-section').next().offset().top
  }, 1000);
});
</script>

Any help on this would be hugely appreciated! 

Thanks in advance 🙂

On 7/22/2020 at 5: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>

 

Very helpful, thank you. I used this for a page based on a powerpoint - janickilogging.com/carbon-capture-forestry
Do you have any suggestions on how to include text with the arrow such as, "Next"?

On 4/13/2022 at 4:31 AM, peterw said:

Very helpful, thank you. I used this for a page based on a powerpoint - janickilogging.com/carbon-capture-forestry
Do you have any suggestions on how to include text with the arrow such as, "Next"?

Add this into Code Block

<style>
  a.scroll-down:before {
    content: "Next";
    position: absolute;
    left: 50%;
    transform: TranslateX(-50%) rotate(-45deg);
    top: -20px;
    margin-left: -10px;
}
</style>

Hello tuan, you help me a lot with the arrow.

I make my own on my website https://arnaudchabot.com/life

When i click on the arrow, it brings me between two sections but i want the link to scroll just above my second section, is it possible?

Also can i move my scroll down arrow lower in the picture without it resizing ?

On 5/30/2022 at 6:58 PM, arnaudchabot said:

Hello tuan, you help me a lot with the arrow.

I make my own on my website https://arnaudchabot.com/life

When i click on the arrow, it brings me between two sections but i want the link to scroll just above my second section, is it possible?

 

Also can i move my scroll down arrow lower in the picture without it resizing ?

#1. Try adding this to Design > Custom CSS

div#block-yui_3_17_2_1_1653910317167_2514 {
    position: relative;
    bottom: -300px;
}

#2. Edit bottom: 0;

to

bottom: -100px;

it works, thanks !

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section? Like add something to my CSS to cancel out that code...to bring back the section and delete this?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section? Like add something to my CSS to cancel out that code...to bring back the section and delete this?

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

On 9/3/2022 at 2:32 AM, taylorroy said:

Shoot. Similar to @michael_t_music, I dropped in this code block on my top section, and now the section is not visible in Editor or on the site. So....I can't even edit the section to delete this code block. 

Any ideas on how I can recover that section? Like add something to my CSS to cancel out that code...to bring back the section and delete this?

 

Site
https://circle-tambourine-pzrk.squarespace.com/

pw: wip

A lot of code in this topic. Which code did you add?