Joomla Templates Club 406,261 posts

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#979988

Hello

I would like to add top button to my site.

http://www.le-petit.gr

Please advise

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980010

Hi
may i know what type of button you want to add ? I have not found any special button in demo site : http://ja-cagox.demo.joomlart.com/index.php/en/

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#980019

Your site does not have top button.

I want to implement one.

Pages are big and it is very easy for my clients.

I like the way that is for example in JA Megastore

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980033

Hi
please share screenshot of your request . Here is demo site : http://prntscr.com/cyn2rq
of JA Megastore

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#980035

Hello

Please see attached photo

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980056

Hi
For this open /tpls/blocks/footer.php file add below code like in my screenshot
http://prntscr.com/cynl6n

<!-- BACK TOP TOP BUTTON -->
<div id="back-to-top" data-spy="affix" data-offset-top="200" class="back-to-top hidden-xs hidden-sm affix-top">
  <button class="btn btn-primary" title="Back to Top"><i class="icon-arrow-up fa fa-angle-double-up"></i></button>
</div>

<script type="text/javascript">
(function($) {
  // Back to top
  $('#back-to-top').on('click', function(){
    $("html, body").animate({scrollTop: 0}, 500);
    return false;
  });
})(jQuery);
&lt;/script&gt;
<!-- BACK TO TOP BUTTON -->

then add below code in custom.css file

.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 2;
}.back-to-top .btn {
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    border-radius: 50%;
    border: 0;
    padding: 0;
    height: 40px;
    width: 40px;
    -webkit-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.back-to-top.affix .btn {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.back-to-top .btn-primary {
    color: #ffffff;
    background-color: #ff5a00;
    border-color: #ff5a00;
}

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#980078

Hello

I did all that and the top button appeared but

It does not send me on top of the page.

Also the arrows are not centered in the circle as you can see.

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#980083

Correction.

After clear cashe it goes up correcty.

Just the arrow to make it in the centre

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980085

Hi
I fixed it directly on your site , kindly check the site now .
PS : It is back to top button .

[Gigaparts Friend GigapartsJoin date: February 2016Posts: 116Downloads:309Uploads:16 Thanked: 2 times in 2 posts]

#980088

Works great.

Can you please send me the code you inserted so i can implement this method to other sites as well?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980095

Its the same code , you can check footer.php and custom.css file .

[Author]

Posts