Powrót do góry landing page

26.01.2019

Chcesz, aby użytkownik Twojego landinga mógł szybko wrócić na górę strony, gdy znajdzie się na dole landing page’a?
Nic prostszego! Możesz tego dokonać za pomocą kilku dodatkowych kodów wklejonych do landinga.

1. Przejdź do Dashlane -> Kody JavaScript wybranego landinga, a następnie dodaj poniższy kod.

<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. Następnie wejdź w edycję landinga i dodaj widget Własny HTML, wklejając do niego poniższą treść.

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

3. Pozostając w edytorze, otwórz zakładkę Ustawienia strony i dodaj własny styl CSS (który możesz dowolnie edytować, w zależności od tego, jaki wygląd przycisku chcesz osiągnąć).

#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. Po przejściu powyższych kroków na Twoim landingu pojawi się ikona pozwalająca jednym kliknięciem powrócić do góry Twojej strony docelowej.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.