Scroll Down Arrow: Custom Image

What does this code do?

This code snippet will allow you to use a custom image as a scroll down arrow that when clicked scrolls the visitor down to a specific spot on the page.

Note: This code snippet uses a custom image for the arrow. To use a Font Awesome Icon, check out this code snippet.

Upload Your Image

Prepare the image you would like to use for your arrow. Make sure you compress the image so that the file is no larger than 500KB or it could slow down your page loading time.

Upload this file to Design > Custom CSS > Manage Custom Files. The click on the image to insert the image link into the Custom CSS Section. Copy this url and save it for the next step. Then delete the url out of the Custom CSS Section.

Code Snippets

Anchor Link

Copy and paste this code into a Code Block at the top of the section you would like the scroll to.

<div id='ANCHORNAME'></div>

Change ANCHORNAME to a unique name of your choice. Make sure to use the exact name in the next step.

Scroll Down Arrow

Copy and paste this code into a Code Block where you want the scroll down arrow to be.

<div id="scrollDownArrow" style="display: flex; align-items: center; justify-content: center;">
  <a href="#ANCHORNAME"><img src="IMAGELINK"></a>
</div>

Change ANCHORNAME to the name you used in the previous step. Don’t forget to keep the # in front. Change IMAGELINK to the link you saved in the first step.

CSS

Copy and paste this code into Design > Custom CSS.

/* Smooth Scroll */
html {
  scroll-behavior: smooth;  /* makes the scroll smooth and not jumpy */
}

If you would like to move the arrow down slightly, copy and paste this code into Design > Custom CSS.

/*Reposition Scroll Down Arrow */
#scrollDownArrow {
  position: relative;
  bottom: -5vw; /* moves the arrow down */
}

If you would like to change the size of your image, copy and paste this code in Design > Custom CSS.

/*Resize Scroll Down Arrow */
#scrollDownArrow img {
  width: 5vw;
}

How To Use It

1. Upload your image and save the image link.

2. Copy and paste the code as indicated above.

3. Customize the anchor name, the image size, and the image position.