Back to top, Scroll to top button

iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
12 years ago
517 posts
And it should be free =)
updated by @ilovehousemusic: 12/22/13 04:06:10AM
brian
@brian
12 years ago
10,148 posts
Add this to your meta.tpl in the ready function:

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

Then add this to your footer.tpl:

<a href="#" class="scrollup">Scroll</a>

Then style the "scrollup" class to suit your needs. There's dozens of them out there, no need for a module :)

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
12 years ago
517 posts
If upgrading core, will this break though? Dont want to have to implement this each time skin tpls get updated.
brian
@brian
12 years ago
10,148 posts
You should never be modifying core templates - you want to do one of 2 things:

1) Using the Jamroom Developer module, "clone" the skin you are basing your design off of and give it a unique name - make all your changes to those templates. Then, when the skin that you have based yours off of is updated, you can compare the changes and upgrade your skin accordingly

2) Make all your changes in the "Templates" section of the skin menu - those changes are stored in the database and are never overwritten on an update.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
12 years ago
517 posts
Right just discovering that now. OK great Thank you!
SteveX
SteveX
@ultrajam
12 years ago
2,584 posts
If you want to take things further than scrolling your way to the top, here's some documentation on how to do scrolling back down to items in a template:
https://www.jamroom.net/ultrajam/documentation/code/1125/using-scrollintoview-in-your-module-or-skin


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
12 years ago
517 posts
@SteveX thank you!
iLoveHouseMusic
iLoveHouseMusic
@ilovehousemusic
12 years ago
517 posts
brian:
1) Using the Jamroom Developer module, "clone" the skin you are basing your design off of and give it a unique name - make all your changes to those templates.

I searched but did not find the Developer module, link please? TIA,
Brian
brian
@brian
12 years ago
10,148 posts
iLoveHouseMusic:
I searched but did not find the Developer module, link please? TIA,

In your ACP -> Marketplace enter "developer" into the search box and install.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
pch
@pch
12 years ago
328 posts
@Brian,

Can we use an image (arrow up) instead of a text as a link anchor like here in JR?

Is your modifification mobile friendly?

Thanks.
brian
@brian
12 years ago
10,148 posts
pch:
Can we use an image (arrow up) instead of a text as a link anchor like here in JR?

I'm not sure what you mean - can you clarify?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
douglas
@douglas
12 years ago
2,797 posts
pch:
@Brian,

Can we use an image (arrow up) instead of a text as a link anchor like here in JR?

Is your modifification mobile friendly?

Thanks.

Just change the "Scroll" text to an image... and yes, I believe it is mobile friendly.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
pch
@pch
12 years ago
328 posts
@Brian,

It is exacly what Douglas answered: An "image" instead of the word "Scroll".

@Douglas

Thanks a lot.

Tags