Back to Top transparency

4.3 has transparency issues.
4.4 is supposed to fix it.

thank you. I saw that on the hamburger menu. But the back to top button has not been adjustable to transparency for a long time.

But what bothers me even more is the size on a smartphone. Many sites used it but nowhere is the button nearly as big.

Last edited 29 January 2022 by AK1985

But what bothers me even more is the size on a smartphone. Many sites used it but nowhere is the button nearly as big.

I agree. I asked why this way several versions ago only to be told it was the 'standard' size and we couldn't make it smaller.

The only way I know of getting what you want might finding the icon being used that you like and view the image in another tab if allowed, then download the image and edit it to your satisfaction. (hard way: Take a screenshot and edit it. )

With Nicepage closed, find where Nicepage is storing the site you are working on, then overwrite the existing file.

Note: This is all just SWAG. I've never done it, but it's how I think it could be done. I don't use the Nicepage function. I use something that did it long before the function became available in Nicepage.

<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

```

Last edited 29 January 2022 by Doug G.