Back to top / Smooth scrolling | Custom code while waiting for the feature.

Hi,

Thank you for sharing this tip with Nicepage community!

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

Thank you for your script. I am not a programmer but I have somehow managed to scroll down and up. can man also change speed?

custom html

style>#bttbutton {........content: '▲';
........
style>#bttbutton2 {.....content: '▼';
........"

Head HTML

script>

    window.onload = function() {


    ///////////////////
    // smooth scroll //
    ///////////////////


        document.body.addEventListener('click', e => {


          const href = e.target.href;
          if (!href) return;


          const id = href.split('#').pop();
          const target = document.getElementById(id);


          if (!target) return;
          e.preventDefault();
          history.pushState({}, document.title, href);
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });


        });


    /////////////////
    // back to top //
    /////////////////


        var btn = $('#bttbutton');
        var btn2 = $('#bttbutton2');
        btn2.addClass('show');

        $(window).scroll(function() {
          if ($(window).scrollTop() > 600) {
            btn.addClass('show');
            btn2.removeClass('show');
          } else {
            btn.removeClass('show');
            btn2.addClass('show');
          }
        });


    btn.on('click', function(e) {
          e.preventDefault();
           $('html, body').animate({scrollTop:0}, '300');
        });
    btn2.on('click', function(e) {
          e.preventDefault();
          $('html, body').animate({scrollTop:$(document).height() + $(window).height()});
        });


    }
/script>"

If you wanna change the scroll speed when clicking button (back to top & bottom in your case)
Edit the "300" value, higher number = slower speed (millisecond)

btn.on('click', function(e) {
      e.preventDefault();
       $('html, body').animate({scrollTop:0}, '300');
    });

And add it here too I guess :

btn2.on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({scrollTop:$(document).height() + $(window).height()}, '300');
    });

Last edited 08 July 2019 by a.chypre

Thank you . Has worked but without ' '

$('html, body').animate({scrollTop:$(document).height() + $(window).height()}, 900)

Thank you . Has worked but without ' '

$('html, body').animate({scrollTop:$(document).height() + $(window).height()}, 900)

Ok nice to know ! :) seems that nicepage has a lot of problem handling " & ' in custom code :/

So I saw that back to top button & smooth scrolling are some of the features in the wishlist.
While we are all waiting for them to be added to nicepage we can also use simple custom code to add both of this feature pretty easely. So here's a little how to :

Add this code in Additional Head HTML (javascript for boths features)
https://pastebin.com/1Q5AvSjW

Then just add some custom html anywhere on your site for the back to top button with this code (css & html for the button) you can edit color of background-color to change the color of the button :
https://pastebin.com/nbJRChdW

Enjoy !

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