Arrow scroll down

Hello, 

Im trying to add an arrow to scroll down but my website is private with password.

Can anyone help me?

Not without template information and maybe access to your site, to look at. Post a link and password, not your admin password, but the viewer password. 

Insert Code Block > Paste these code

<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

On 4/18/2020 at 3:00 AM, tuanphan said:

Insert Code Block > Paste these code

<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

 

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

#siteWrapper:after {
 content: "V";
 position: absolute;
 top: 1230px;
 width: 100%;
 text-align: center;
 z-index: 50;
 display: block;
 color: white;
}

However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger?

I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long?

As ever you help is much appreciated!

Adrian

25 minutes ago, AFisk said:

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

 

Where arrow? can you take a screenshot?

4 minutes ago, tuanphan said:

Where arrow? can you take a screenshot?

Its very small white V , at the bottom centre

where...

8 minutes ago, tuanphan said:

where...

Thats very strange as you're showing a page that I don't have! 

My ACT is only on my landing page and not on the CONTACT page. What browser are you using? 

Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre?

Ive just seen that it's not appearing if you're using a mobile. It only seems to be working with a desktop.

   Why not post something like this in your header or top of page. It will show up on both desktop and mobile. 

1 hour ago, derricksrandomviews said:

   Why not post something like this in your header or top of page. It will show up on both desktop and mobile. 

Hi - Because it would not align with the style of my site. It's too obvious and would be better suited to a shopping site or something similar. I've found the right thing, which is the white V at the bottom of the page. All I need to know is how to Make it bigger and thicker and ideally work on a mobile.

http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg

Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The  bouncing arrow is a bit much, I agree. 

3 minutes ago, derricksrandomviews said:

http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg

Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The  bouncing arrow is a bit much, I agree. 

Derrick hi,

thanks for your advice. 

Where would I insert the arrow and how would I get it to be placed at the bottom of the frame? 

Find a spot  where you can add an image block, you can push it around with spacers if need be, one on the top of the block and expand it to move the arrow down to where you want it. I say this hoping it will work with your template. If it does you won't need the css code you have tried. 

16 hours ago, AFisk said:

Thats very strange as you're showing a page that I don't have! 

My ACT is only on my landing page and not on the CONTACT page. What browser are you using? 

Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre?

 

Can you share link to Exactly page?

On 5/6/2020 at 10:37 AM, AFisk said:

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

#siteWrapper:after {
 content: "V";
 position: absolute;
 top: 1230px;
 width: 100%;
 text-align: center;
 z-index: 50;
 display: block;
 color: white;
}

However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger?

I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long?

As ever you help is much appreciated!

Adrian

Hey Adrian,

This approach might work better for you.

#page .page-section:first-of-type:after {
 font-family: squarespace-ui-font;
 content: "\E009";
 border: 3px solid #fff;
 border-radius: 50%;
 font-size: 30px;
 text-align: center;
 line-height: 40px;
 height: 40px;
 width: 40px;
 position: absolute;
 bottom: 15px;
 left: 50%;
 transform: translatex(-50%) !important;
 display: block;
 opacity: 1;
 transition: all ease .5;
}

This code will work on Squarespace 7.1. You can play with the font-size, height, and width numbers to adjust the size. You can also remove the "border" line if you just want the arrow.

I hope this helps!

Hi @AndyB !

that's amazing you really helped. 

Can we change the arrow symbol to a different one? and since it's still, like if you click on it it doesn't really take you to the next block, can we make it clickable so that we achieve a smooth scroll to the next block beneath the banner image?

thanks

On 1/23/2021 at 9:12 PM, AylaMourtada said:

Hi @AndyB !

that's amazing you really helped. 

Can we change the arrow symbol to a different one? and since it's still, like if you click on it it doesn't really take you to the next block, can we make it clickable so that we achieve a smooth scroll to the next block beneath the banner image?

 

thanks

@AylaMourtada

I'm glad that helped.

Yes, we can change the symbol. Here's a link I have bookmarked that offers different possibilities. You can replace \E009 with something else from this chart. Be sure to keep the quotation marks around the symbol code.

https://ericaheinz.com/notes/symbol-fonts-on-squarespace/#.YB2CSXdKi3J

I don't believe that it's possible to add a link to CSS using CSS. There may be a way to do this using javascript. 

Another option would be to use a different method to get an arrow (e.g., an image block with an arrow uploaded or a code block with HTML). I think it's more challenging to get the positioning of the arrow to work as well as it does with the approach I shared. 

As I'm typing this, an idea came to mind that might make positioning a Squarespace element doable. Usually, it's hard to get the arrow to the bottom of the banner because even when using "position: absolute" in the CSS for that element, the child element is still confined to the parent element's restrictions (e.g., padding, position, etc.). But, using a negative margin number may do the trick.

I'll have to play with this idea and report back if it works.