Back to the top

15.03.2019

Don’t want to scroll up all landing page to get to the top of the page if you are at the bottom of it? You can add a specific code which allows your user to go back to the top of your page after one click.

1. In the app, go the Dashboard -> Javascript codes tab of the chosen landing page, add a new script and paste the code below.

<script>
$(document).ready(function () {

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.backtotop').fadeIn();} else {$('.backtotop').fadeOut();
}
});

$('.backtotop').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});

}); 
</script>

2. Then open a landing page editor and add a Custom HTML widget with following code:

<a href="#" id="linkTop" class="backtotop"></a>

3. Open Page Settings tab and add a custom CSS style (you can edit it whatever you want):

#linkTop, #linkTop:before {
color: #a8d600;
border-color: #a8d600;
}
.backtotop {
border: 3px solid #a8d600;
}

#linkTop:before {
font-family: FontAwesome;
text-decoration: none;
content: "\f077";
}

.backtotop:before {
content: '\e75f';
font-family: "crum-fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 45px;
font-size: 23px;
line-height:40px;
left: 0;
text-align: center;
font-variant: normal;
text-transform: none;
position: absolute;
}
.backtotop{
position: fixed;
right: 0;
bottom: 20px;
width: 45px;
height: 45px;
display: block;
z-index: 99999999;
border-radius: 100em;
}

4. The icon ‘back to the top’ should appear on your LP – you can test it.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.