Back to top button is long overdue!

Hi John,

Unfortunately Back To Top control is still in our backlog but we sent your request to our developers and asked them to discuss the possibility to implement this control in the future Nicepage versions.
But unfortunately, I cannot say when this feature will be implemented.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

OK, thanks.

Hi, so far I cant find any back to top button but you can make your own based on this snippet which is based on https://codepen.io/rdallaire/pen/apoyx

HERE IS STEP BY STEP HOW YOU CAN USE IT IN YOUR PAGE WITH NICEPAGE>

1] firstly add a jquery script to your website (SETTINGS - HTML - ADDITIONAL HTML HEADER) - do it exactly like in this example, if you want you can change names of triggers....

 <script>
     window.onload = function()  {              
    // ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
    }
</script>

2] ADD A CUSTOM HTML CODE TO THE FOOTER - for whole website (or to any different location of your website if you want to show this button only in several pages)

 <style>
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
</style>
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

3] OPTIONAL STEP 3 if your website does not using FONT - AWESOME, add this to custom header (SETTINGS - HTML - ADDITIONAL HTML HEADER)

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Now you should have quite nice back to top button and you can change the design of it by playing with CSS of the button

With regards

Petr