Back to the top button

nick.green
33 Posts
nick.green posted this 16 December 2018

The ability to turn on on a page by page basis a back to the top button that appears after the visitor has begun to scroll down the page. The button to be styleable by background colour, shape (square or rounded corners), opacity (default to say 75%), choice of icon in the button and position (top, bottom, left, right).

The ability to turn on on a page by page basis a back to the top button that appears after the visitor has begun to scroll down the page. The button to be styleable by background colour, shape (square or rounded corners), opacity (default to say 75%), choice of icon in the button and position (top, bottom, left, right).
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 17 December 2018

Hi Nick,

Thanks for the suggestion, it is added to our wishlist.

...................................................
Sincerely,
Hella
Nicepage Support Team

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

Hi Nick, Thanks for the suggestion, it is added to our wishlist. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
wpexpertinbd
15 Posts
wpexpertinbd posted this 07 March 2019

Hello Hella,

Still I don't see "back to top" button in Nicepage, It's a must have button for big page otherwise visitor need to scrolling many times to go back to top. When you will add this option? another question why theme "back to top" button not working with nicepage?

Thank You
Benjamin Biswas

Hello Hella, Still I don't see "back to top" button in Nicepage, It's a must have button for big page otherwise visitor need to scrolling many times to go back to top. When you will add this option? another question why theme "back to top" button not working with nicepage? Thank You Benjamin Biswas
DEWA
32 Posts
DEWA posted this 09 March 2019

Very Important!!!

Very Important!!!
Support Team
Support Team posted this 11 March 2019

Hi guys,

Back to Top button is in our to-do list. it will be available in the future. But unfortunately, I cannot say when.

...................................................
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

Hi guys, Back to Top button is in our to-do list. it will be available in the future. But unfortunately, I cannot say when. ................................................... 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
cm6
6 Posts
cm6 posted this 22 May 2019

This is now two months after your last post.
When are we getting the Back to Top button?

This is now two months after your last post. When are we getting the Back to Top button?
grafkomjanow
6 Posts
grafkomjanow posted this 23 May 2019

I am slowly starting to regret that I bought this program, which is just beginning.

I am slowly starting to regret that I bought this program, which is just beginning.
Support Team
Support Team posted this 24 May 2019

Hi,

Please vote for this topic if you're interested in this feature.
In the meantime, we're working on the MegaMenu.
Last year we launched the voting and till now we follow the plan we built based on the voting results.

...................................................
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

Hi, Please vote for this topic if you're interested in this feature. In the meantime, we're working on the MegaMenu. Last year we launched the voting and till now we follow the plan we built based on the voting results. ................................................... 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
joni2
2 Posts
joni2 posted this 3 weeks ago

I would like to see a "back to the top" button added. I've tried many scripts and it just won't work with the program.

How do we vote for this?

I know there are many tweaks and changes that have to happen so hopefully this will be on top of some other items. There are some changes recently that seem to have taken things a bit backwards.

Hanging in there and appreciating the hard work!!

I would like to see a "back to the top" button added. I've tried many scripts and it just won't work with the program. How do we vote for this? I know there are many tweaks and changes that have to happen so hopefully this will be on top of some other items. There are some changes recently that seem to have taken things a bit backwards. Hanging in there and appreciating the hard work!!
Support Team
Support Team posted this 3 weeks ago

Hi,

Thanks for your input. It is counted, we see the votes in this topic. For now we have worked on improving the responsive behavior, that is a major task for now.
...................................................
Sincerely,
Hella
Nicepage Support Team

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

Hi, Thanks for your input. It is counted, we see the votes in this topic. For now we have worked on improving the responsive behavior, that is a major task for now. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
p.ourednicek
5 Posts
p.ourednicek posted this 3 days ago

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

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
p.ourednicek
5 Posts
p.ourednicek posted this 2 days ago

The ability to turn on on a page by page basis a back to the top button that appears after the visitor has begun to scroll down the page. The button to be styleable by background colour, shape (square or rounded corners), opacity (default to say 75%), choice of icon in the button and position (top, bottom, left, right).

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

> The ability to turn on on a page by page basis a back to the top button that appears after the visitor has begun to scroll down the page. The button to be styleable by background colour, shape (square or rounded corners), opacity (default to say 75%), choice of icon in the button and position (top, bottom, left, right). 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
You must log in or register to leave comments