Skip to content

[NODEBB] Scroll Button

Solved Customisation
7 2 1.1k 1
  • Hi @phenomlab

    I feel like I’ve been abused, but too bad, I’m starting…

    I saw that you had a scroll button that appears/disappears automatically.

    4f6552e9-d8ca-4284-adf2-6d0675f3e32c-image.png

    I see this is a JS/CSS/HTML code.

    I also saw that this button does not appear in the topics (probably acting as a duplicate with the existing one one NodeBB). I’m also interested with that element.

    On the other hand it’s very practical in the long page categories for example.

    Is it possible to share this code or not?

    Thanks in advance.

    Good evening!!

  • Hi @phenomlab

    I feel like I’ve been abused, but too bad, I’m starting…

    I saw that you had a scroll button that appears/disappears automatically.

    4f6552e9-d8ca-4284-adf2-6d0675f3e32c-image.png

    I see this is a JS/CSS/HTML code.

    I also saw that this button does not appear in the topics (probably acting as a duplicate with the existing one one NodeBB). I’m also interested with that element.

    On the other hand it’s very practical in the long page categories for example.

    Is it possible to share this code or not?

    Thanks in advance.

    Good evening!!

    @downpw Of course it’s possible to share 🙂

    Here’s the CSS

     #btt {
        display: inline-block;
        background: rgba(0, 0, 0, 0.2);
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 4px;
        position: fixed;
        bottom: 50px;
        right: 30px;
        transition: background-color .3s, opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
      }
      #btt.show {
      opacity: 1;
      visibility: visible;
      z-index: 10000;
      color: #ffffff;
    }
    a#btt.show:hover {
      box-shadow: inset 0px 0px 0px 1px #4F707A !important;
    }
      a#btt i {
          position: absolute;
          top: 32%;
          left: 35%;
      }
    

    Obviously, style to suit your own site

    And here’s the JS

    $(window).on('action:ajaxify.end', function (data) {
        var matched = false;
        var btn = $('#btt');
        var bar = $('.reading-meter');
        bar.removeClass('show');
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                btn.addClass('show');
                bar.addClass('show');
            } else {
                btn.removeClass('show');
                bar.removeClass('show');
            }
            if (window.location.href.indexOf("topic") > -1) {
                if (matched == false) {
                    console.log("This is a topic, so hide the scroll top feature");
                    matched = true;
                }
                btn.removeClass('show');
            }
        });
        btn.on('click', function (e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: 0 }, '300');
        });
    });
    

    Some points

    bar.addClass('show'); and bar.removeClass('show'); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

  • @downpw Of course it’s possible to share 🙂

    Here’s the CSS

     #btt {
        display: inline-block;
        background: rgba(0, 0, 0, 0.2);
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 4px;
        position: fixed;
        bottom: 50px;
        right: 30px;
        transition: background-color .3s, opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
      }
      #btt.show {
      opacity: 1;
      visibility: visible;
      z-index: 10000;
      color: #ffffff;
    }
    a#btt.show:hover {
      box-shadow: inset 0px 0px 0px 1px #4F707A !important;
    }
      a#btt i {
          position: absolute;
          top: 32%;
          left: 35%;
      }
    

    Obviously, style to suit your own site

    And here’s the JS

    $(window).on('action:ajaxify.end', function (data) {
        var matched = false;
        var btn = $('#btt');
        var bar = $('.reading-meter');
        bar.removeClass('show');
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                btn.addClass('show');
                bar.addClass('show');
            } else {
                btn.removeClass('show');
                bar.removeClass('show');
            }
            if (window.location.href.indexOf("topic") > -1) {
                if (matched == false) {
                    console.log("This is a topic, so hide the scroll top feature");
                    matched = true;
                }
                btn.removeClass('show');
            }
        });
        btn.on('click', function (e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: 0 }, '300');
        });
    });
    

    Some points

    bar.addClass('show'); and bar.removeClass('show'); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

    @phenomlab said in [NODEBB] Scroll Button:

    Some points
    bar.addClass(‘show’); and bar.removeClass(‘show’); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

    @phenomlab

    You talk about Reading meter bar at the bottom of the navbar isn’ it?

  • @phenomlab said in [NODEBB] Scroll Button:

    Some points
    bar.addClass(‘show’); and bar.removeClass(‘show’); are only required if you are using the progress-meter code. Essentially, the two are designed to work together with the code above, but it won’t matter that much if you aren’t using the progress-meter (however, you may land up with some errors in the console).

    @phenomlab

    You talk about Reading meter bar at the bottom of the navbar isn’ it?

    @downpw Yes, that’s correct.

  • Ok no problem Sir 😉

  • DownPWundefined DownPW has marked this topic as solved on
  • Add HTML Widget footer 😉

    <a id="btt" class=""><i class="fas fa-chevron-up"></i></a>
    
  • Add HTML Widget footer 😉

    <a id="btt" class=""><i class="fas fa-chevron-up"></i></a>
    

    @downpw ooops. Forgot that. Thanks for adding.


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Widget | CSS customization

    Solved WordPress css
    53
    17 Votes
    53 Posts
    4k Views
    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    2k Views
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    700 Views
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    795 Views
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    1k Views
    @phenomlab YAY! It works Thanks so much
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    1k Views
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    1k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    1k Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation