Back to top globallly

[deleted]

matteocontrini I thought so as well, but I can't find it !

matteocontrini

[deleted] you don't need to find it, just use it 🙂 $ is available in the global scope

Littlegolden

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:

matteocontrini

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]

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

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

[deleted]

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

Kylo

[deleted] yeah as Littlegolden did for his/her extension but using foot[] instead of head[]

[deleted]

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

Littlegolden

Kylo @matteocontrini @[deleted] I see, thank you guys for all your kindness!

[deleted]

@Littlegolden "Phenterage" ?? 🙂

Littlegolden

[deleted] Oh MY GOD. . . I'm so sorry. . . Really sorry! !!

[deleted]

Littlegolden And "MaTTaDox" ? Do you mean @matteocontrini ? 🙂

[deleted]

Littlegolden LOL

Littlegolden

[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!

[deleted]

Littlegolden hahahahaha..... No issues for me - I found it funny !

HD3D

@Littlegolden Using this custom css doesn't seem to work for me

.scroll-up {
    background-color: @config-primary-color;
    right: 30px;
    bottom: 30px;
}

I still get the red color and the button is hiding notification icon as I have your UI tab on phone extension installed too

Littlegolden

HD3D If you're using UI Tab, you don't need this custom css, this two extension are compatible. Sorry I didn't point that.

HD3D

Littlegolden Ok but back to top button is still hiding notification icon on UI tab even without using this custom css, how do I make it a little up like the one on your website?

Littlegolden

HD3D You can now update UI Tab to v0.1.6. I increased the distance of the back top button from the UI Tab.

composer require itnt/flarum-uitab

If you want to custom the distance yourself ↓ If your are using UI Tab extension at the same time, I highly recommend that you do not use the css below.

@media(max-width: 500px) {
    .scroll-up{
        bottom: YYYpx !important;   /* change YYY to your numbers */
    }
}

HD3D

Littlegolden Perfect, Thank you so much ❤️

« Previous Page