Joomla Templates Club 406,261 posts

[jscarfe Friend jscarfeJoin date: December 2012Posts: 22Downloads:0Uploads:2 Thanks: 13 Thanked: 4 times in 1 posts]

#187436

I’d like to add a “back-top-top” button in the Brisk template. I’ve copied over the code in the template’s “navhelper” file from the Fubix template, along with the CSS. Basically, both templates’ navhelper now look identical, but I’m missing the final step since clicking the “to-top” graphic does nothing. Any help would be greatly appreciated!

Thanks!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#492684

Hi,

In order to make “Back to top” work, follow below steps:

1. Copy attached js file into path: <blockquote>templatesja_briskjs</blockquote>
2. Open <blockquote>templatesja_brisketcassets.xml</blockquote>, then add below text at 5th line:

<file>js/jquery.easing.1.3.js</file>

3. Open <blockquote>templatesja_briskjsscript.js</blockquote>, add below codes at line 17th:

// back to top
(function(){
$ja('#back-to-top').on('click', function(){
$ja('html, body').stop(true).animate({
scrollTop: 0
}, {
duration: 800,
easing: 'easeInOutCubic',
complete: window.reflow
});

return false;
});
})();

* Don’t forget to inform me your result.

Leo

---

Attachments:

1. jquery.easing.1.3.zip

1 user says Thank You to phong nam for this useful post

1. jscarfe

[jscarfe Friend jscarfeJoin date: December 2012Posts: 22Downloads:0Uploads:2 Thanks: 13 Thanked: 4 times in 1 posts]

#493266

Awesome!

Thanks for the information Leo … works like a charm!

1 user says Thank You to jscarfe for this useful post

1. JA Developer

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#564055

Hello

I’m facing the same problem. I first tried: http://www.t3-framework.org/documentation/bs3-customization#back-to-top with no luck, then I found this thread. It seems to be rather old. I tried to use it but no success.

I’m Using JA_Brisk 1.1.1 and did the following.

(function($){

//Check div system-message-container exist

$(document).ready(function(){

if($("#system-message").children().length){

$("#system-message-container").show();

$("#system-message a.close").click(function(){

setTimeout(function(){if(!$("#system-message").children().length) $("#system-message-container").hide();}, 100);

});

}else{

$("#system-message-container").hide();

}

});
})(jQuery);

// back to top
(function(){
$ja('#back-to-top').on('click', function(){
$ja('html, body').stop(true).animate({
scrollTop: 0
}, {
duration: 800,
easing: 'easeInOutCubic',
complete: window.reflow
});

return false;
});
})();

I’m not the coder, so I’m not sure if I put it to the correct position.

Can you please advice?

Thanks

Roger

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#564212

Hi Roger,

You can try with my tweak here:
– Remove above code and use guideline in this tip: http://www.t3-framework.org/documentation/bs3-customization#back-to-top
– But change a bit:

Replace:
<button class=”btn btn-primary” title=”Back to Top”><i class=”fa fa-angle-up”></i></button>
With: <button class=”btn btn-primary” title=”Back to Top”><i class=”icon-chevron-up”></i></button>

In the style.less file, remove this property: .opacity(0.7); http://prntscr.com/6k96yp

Then open file: /templates/ja_brisk/css/custom.css, add this rule:


.back-to-top i {
color: #000;
font-size: 12px;
line-height: 1em;
left: 50%;
margin-top: -11px;
margin-left: -4px;
position: absolute;
top: 50%;
}

#back-to-top .btn { color: #000 !important;}

#back-to-top {
bottom: 15px;
display: block;
}


Finally, go to template manager section in backend > compile Less to Css. Remember to backup all current css files first as when compiling less to css, they will be overridden.

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#564989

found the problem. Works like a charm.

Thank you

Roger

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#565374

I played a little bit around with the css style. I wanted to have the button on the right hand side.
Therefore I added the following to the custom.css. Is that correct?

.back-to-top i {
color: #fff
}

#back-to-top .btn {
color: #000 !important;
height: 40px;
margin-right:15px;
}

#back-to-top {
bottom: 15px;
display: block;
right:0;
}

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#565401

Does this work?

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#565525

yes, but 🙂

See this picture, here you can see it working. It also works on iphone and ipad. Why do you mean that? Did I do something funny?

Now here is the “but”. If the pages are rather short, then it looks strange

. There is still something wrong.

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#565600

You can post URL of page where the page is short, I will take a look

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#566208

Here a short page: http://www.samariter-osv.ch/intern/kl-tl/downloads

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#566249

In the ‘custom.css’ file, you can change:


#back-to-top {
bottom: 15px;
display: block;
right:0;
}


To:


#back-to-top {
bottom: 15px;
display: block;
position: fixed;
}


[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#569017

Hi Saguaros

Changed the code. Now the arrow is always on the left hand side and not on the right side anymore, where I would like it to be.

Roger

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#734108

Hi Saguaros

Changed the code. Now the arrow is always on the left hand side and not on the right side anymore, where I would like it to be.

Roger

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#569166

Hi Roger,

You can add the property ‘right: 0;’ into above rule:


#back-to-top {
bottom: 15px;
display: block;
position: fixed;
right: 0;
}


[Author]

Posts