Change Scroll Top Anchor to an CTA button

[Like2Trade]

Hi great supportteam

I was searching for some topics, but what i want to accomplice is not longer supported by the old topic i found… I would love to change the Scroll Top Anchor to an CTA button… So i would love to use my own image and URL for the anchor. (so use it like a image hyperlink)

The Stack i use is the ICON
THNXS!
Greetz Wouter

[thai]

Hi There,

Instead of customizing the Scroll Top Anchor button, I suggest you to create a separated image link.

You have to setup a child theme first:

Child Themes | Themeco Docs

After that add the following code under functions.php file locates in your child theme:

add_action( 'wp_footer', 'x_custom_cta' );
function x_custom_cta(){
	?>
	<div class="my-cta">
		<a href="http://example.com/"><img src="https://via.placeholder.com/50"></a>
	</div>
	<style type="text/css">
		.my-cta {
			position: fixed;
			bottom: 50px;
			right: 50px;
		}
	</style>
	<?php
}

Then replace the image and link with yours.

Hope it helps

[Like2Trade]

THNXS First of all thank you for the fast reply, worked (almost) like a charm… Only the button(-layer) is behind the content, so its not clickable… Also i would love to let the button invisible till you scroll down (like 1px) so you get some interaction. the header already has an CTA so i don’t want to have two “above the fold”… thanks once again!

Wouter

[Like2Trade]

Fixxed the first with adding

z-index: 999;

to the inline css
Now only searching for an way to keep it invisible till scrolling

[rad]

Hi @Like2Trade,

Unfortunately, that would require custom development as it’s not possible with just CSS. It would be the same as a sticky header with offset configuration and only doable with javascript.

Or you can try using 3rd party plugin such as this https://es.wordpress.org/plugins/animate-it/, then use the animation for your CTA block. It says on the description that you can also control the offset.

Thanks!

[Like2Trade]

I fully understand! thnxs for the great support anyway
That was the reason i wanted to use the Scroll anchor method…

I now use:

animation: cssAnimation 0s 3s forwards;
opacity: 0;
}

@keyframes cssAnimation {
to { opacity: 1; }
}

So it will be visible after 3 seconds

Keep on the good job
Wouter

[thai]

Glad you’ve sorted it out