Hello,

Yes, that code is ok. To change the color of the button and arrow, add this code:

.scrollup { background-color: rgba(34,34,34,0.6); 
background-image: url('img/icon_top.png');
}

Change the color and transparency to you wish.

Best regards!

Hello,

I tried to add the custom CSS code under general settings but it doesnt seem to work an receive the following errors:

– use of !important

– fallback background-color (hex or RGB) should precede RGBA background-color.

I have passed it in as follows:

scrollup {

z-index: 9999;

display: block !important;

}

.scrollup { background-color: rgba(34,34,34,0.6);

background-image: url(‘img/icon_top.png’);

}

Would I need to do something different for my layout?

Many thanks

Hello,

@darrenbennett1989,

You have pasted the code wrong. The first code should have a dot at the beginning:

.scrollup {
z-index: 9999;
display: block !important;
}

This will display the ‘back to top’ button in your site. (screenshot).
The second block of code:

.scrollup {
background-color: rgba(199, 205, 252, 1);
background-image: url(‘img/icon_top.png’);
}

contains the attributes that are responsible for the button color/transparency and arrow image. If you want to change them, edit the values of these attributes.

Best regards!

Hello,

@onikmia,

-the use of ‘!important’ is a notice, but it represents no issue in the code.
-To change the background color just edit the second css code to this:
.scrollup { background-color: #c7cdfc !important; }
-The arrow is an image. To change it, edit the image source url to the one you want to use. (this attribute: background-image: url(‘img/icon_top.png’);)

-By default the button position is the beginning and does not fade. I will suggest this edit to the developer team to include in the next update. Sorry but this is a customization not included in this support.

Best regards!

Is it possible to amend code so it only displays once the user has scrolled down the page a little?

Hello,

As previously mentioned, the button position in default layout is the beginning and does not fade. You can change that with css but you have to do it yourself as this is a customization not included in this support.

Best regards!