matteocontrini Sorry for that... This is the feature I want on my forum, so I want to share it with Flarum users first. . . I only learned html at school, I don't know how to make a real and useful Flarum plugin. I will improve the plugin after learning related knowledge such as PHP. At present I can only achieve this goal through this stupid method.....

    • [deleted]

    • Post #6

    I'm doing this on my own forum with a couple of lines of code inserted into the header. It doesn't need a plugin and users the native library.

      • [deleted]

      • Post #8

      Littlegolden Here you are

      First, download a copy of jquery.min.js to a location on your server. In this case, I'm storing in a directory called "js"

      Add this into your custom header

      <a id="btt"><i class="fas fa-chevron-up"></i></a>
<script src="https://your-flarum-address/js/jquery.min.js"></script>
<script>
var btn = $('#btt');
$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

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

      Add this into your custom CSS

      #btt {
 display: inline-block;
 background: rgba(0,0,0,0.3);
 width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 55px;
  right: 30px;
  transition: background-color .3s, 
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}
#btt:hover {
 background: rgba(0,0,0,0.7);
 text-decoration: none;
}
#btt::after {
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #808080;
}
#btt.show {
  opacity: 1;
  visibility: visible;
  z-index: 10000;
}
#btt i {
   margin-top: 32%;
   font-size: 1.2rem;
   color: #808080;
}

      Obviously, change colours to suit your own site etc.

          matteocontrini
          Scroll Top Code by Using jQuery

          /* ---------------------------------------------- /*
 * Preloader
 /* ---------------------------------------------- */
(function(){

    jQuery(document).ready(function() {

      
        /* ---------------------------------------------- /*
         * Scroll top
         /* ---------------------------------------------- */
	
		jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > 100) {
                jQuery('.scroll-up').fadeIn();
            } else {
                jQuery('.scroll-up').fadeOut();
            }
        });
		
		jQuery('.scroll-up').click(function () {
			jQuery("html, body").animate({
				scrollTop: 0
			}, 700);
			return false;
		});

    });
})(jQuery);

          but, without the file "https://cdn.jsdelivr.net/gh/Littlegolden/CDN@1.1/scrollTop/jquery.js", the button can not be loaded.

          The console error:
          image.png

              • [deleted]

              • Post #14
              • Edited

              @Littlegolden @matteocontrini exactly. It doesn't work ! Without referencing a jQuery file, and even using $, it fails.

              (index):287 Uncaught ReferenceError: $ is not defined

              Littlegolden I think you need to put the code before </body> instead of in the head, because the Flarum bundle is loaded there. Don't ask me how to do that in an extension though... 😅

                  • [deleted]

                  • Post #16

                  matteocontrini You'd need to use extend.php for that I think.

                  • Kylo replied to this.

                      • [deleted]

                      • Post #18

                      Kylo Thanks - I'll have a look at this, then refactor mine 🙂

                        [deleted] Really Sorry. . . When I type the first few letters of your name, the first user in the candidate box is you, but when I press the Enter key. . . The generated username is not yours. . . I didn't find this problem in the first place. . . Soooooo sorry!
                        image.png