One of the greatest hurdles a lot of performance marketers face with long copy is determining where to position their Call-to-Action (CTA). Should you place it after your headline, by the testimonials, under your value proposition?
Luckily, with some coding, we don’t have to worry about choosing one spot. We can create a CTA that stays with the visitor as they check out our long-copy landing page.
Sticky CTAs
With a little help from jQuery and a javascript plugin called "sticky", we’re able to take any element of our choosing and make it stick to a part of the visitor’s screen as they scroll down the content we’ve provided for them. This technique is easy to implement, and requires just a little bit of code.
1).Include jQuery and Sticky
After you’ve downloaded the sticky plugin, you’ll need to include the sticky plugin and jQuery in your landing page, like so:
<script src="text/javascript" src="jquery.sticky.js"></script>
2).Call the Sticky
Next, you’ll need to call the sticky plugin and apply it to your CTA element:
$(window).load(function(){
$(‘.cta’).sticky({ topSpacing: 50 });
});
</script>
With the above function, the sticky function is applied to our cta class in our landing page. An additional feature allows us to set how far from the top we would like our element to stick. This can be controlled with the topSpacing: setting. The above example sticks the cta at 50 pixels from the top.
ScrollTop by jQuery
While the sticky CTA has its appeals, some people may prefer that their CTA remain at the top of their landing page and above the fold along with all of their other valuable elements.
If a floating CTA isn’t an option, it wouldn’t hurt to provide a small floating button that would shoot the visitor back up to the top of the page instead of monotonously scrolling back up. Fortunately, we can create just that with very little effort.
Calling Our Javascript
First, we need to call the ScrollTop function and define which elements will be affected, like so:
$(document).ready(function(){
$(‘.scroller’).click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
});
});
</script>
With the above javascript, whenever a visitor clicks on our .scroller class, the window will scroll to the top of the window.
Using the .animate attribute, we can create a smooth scrolling animation to any point in the page at any speed. In this case, we chose to scroll to the top with scrollTop: 0 at a rate of 600ms.
Fading Our Scroller
Of course, if our visitors are already viewing the top of our landing pages, a scroller will appear clunky and confusing. We want our scroller to appear only when necessary, so we’ll need to add just a little bit more code.
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100 ) {
$(‘.scroller’).fadeIn();
} else {
$(‘.scroller’).fadeOut();
}
});
$(‘.moveup’).click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
In the above code, we have create some javascript that will allow our .scroller to .fadeIn only when the visitor has scrolled down the page at least 100 pixels and then fadeOut if the visitor scrolls back up within the first 100 pixels of our landing page.
Designing Our Scroller
position: fixed;
bottom: 50px;
right: 100px;
display: none;
width: 50px;
height: 20px;
opacity: 0.3;
cursor: pointer;
}
Now that we’ve got our javascript set up, we just need to define our scroller class with a little bit of CSS. There are just a few important things to keep in mind when styling your scroller class: it will need a fixed position with a top/bottom and left/right placement defined; and display set to "none" so that it fades properly.
Add a thumbnail, adjust the opacity, change the background, or whatever else comes to mind, and create a nice element that will shoot your visitors back up to the top of your page.
[…] Conquer Long Copy Landing Pages with Sticky CTAs and Scrollers – Aziz Kamara […]