T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (13)

Resolved back-to-top

0
Votes
Undo
  1. Igor Cunha
    Igor Cunha
  2. Vanity Monster Sherlock Holmes The Voice
  3. General Discussion
  4. Tuesday, 25 February 2014
  5.  Subscribe via email
Hello, how do I get the button back to the top appears after the page gets rolling. He is appearing on the screen all the time, and wanted only when the screen lowered bottom direction. Unable to compile the code for less, and started doing only with css, my code follows:

.back-to-top {
background:#b4afaf;
bottom: 45px;
height: 40px;
margin: 0;
position: fixed;
right: 10px;
width: 40px;
z-index: 1000;
.opacity(0);
.transition(opacity 350ms);
border-radius:25px;
}
.back-to-top.reveal {
.opacity(30);
cursor: pointer;
}
.back-to-top:hover {
background-color: #908e8e;
cursor: pointer;
}
.back-to-top.active {
display: block;
}
.fa-angle-up{
color: #fff;
font-size: 30px;
line-height: 1em;
left: 35%;
margin-top: -17px;
margin-left: -3px;
position: absolute;
top: 50%;
bottom:30px;
}
  Resende - Rio de Janeiro, Brazil
Visit 
Comment
There are no comments made yet.
Responses (13)
Admin
Admin
Hole-in-One Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Igor Cunha,

You can try to add this script.

$(window).scroll(function(){
$('#back-to-top').toggleClass('reveal', $(window).scrollTop() > [offset-value]);
});

Where the offset-value should be the distance from top(400 is fine).

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Igor Cunha
Igor Cunha
Vanity Monster Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
I used this script below in the footer block and solved.

<script type="text/javascript">

//<![CDATA[
(function($){
$(document).ready(function(){
$('#back-to-top').click(function(){
if($(this).hasClass('reveal')){
$('html, body').stop(true).animate({
scrollTop: 0
});
}
});

$(window).scroll(function(){
$('#back-to-top').toggleClass('reveal', $(window).scrollTop() > (Math.min($('#t3-mainbody').length ? $('#t3-mainbody').offset().top : 0, 150)));
});
});
})(jQuery);
//]]>

</script>
  Resende - Rio de Janeiro, Brazil
Visit 
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
Hello all,

can somebody tell me, how can I place a symbol (like the font awesome fa-angle-double-up) into the footer. I created a new module and paste the code:

<div class="back-to-top">
<i class="fa fa-angle-double-up"></i>
</div>

Then I do the steps above (and also the step in the documentation (Add the "Back to top" button)). But nothing happens. I have no mouse over effekt at the module.
Hope for help.

Cya Arnim
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Igor Cunha
Igor Cunha
Vanity Monster Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
<div id="back-to-top" class="back-to-top t3-hide">

<i class="fa fa-angle-double-up"></i>

</div>
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
Ok, the #id starts the script. Thanks a lot !!!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
Hi guys,

I have the problem that the "button-up" button since the update no longer works. Some reasons? Does anyone else have the problem?

I did an extra module "Button up" 

<div id="back-to-top" class="back-to-top"><i class="fa fa-angle-double-up"></i>

</div>


and place it into the footer.

<!-- FOOTER -->

<div id="topfooter" class="clearfix"></div>

<footer id="t3-footer" class="wrap t3-footer">



	<?php if ($this->checkSpotlight('footnav', 'footer-1, footer-2, footer-3, footer-4, footer-5, footer-6')) : ?>

		<!-- FOOT NAVIGATION -->

		<div class="container hidden-xs">

			<?php $this->spotlight('footnav', 'footer-1, footer-2, footer-3, footer-4, footer-5, footer-6') ?>

		</div>

		<!-- //FOOT NAVIGATION -->

	<?php endif ?>

	

	<!-- BACK TO TOP -->		

		<script type="text/javascript">

		//<![CDATA[

		(function($){

    $(document).ready(function(){

    // back to top

    (function(){

    $('#back-to-top').on('click', function(){

    $('html, body').stop(true).animate({

    scrollTop: 0

    }, {

    duration: 800,

    easing: 'easeInOutCubic',

    complete: window.reflow

    });

     

    return false;

    });

    })();

    });

    })(jQuery);

    //]]>

    </script>

    <!-- //BACK TO TOP -->



</footer>

<!-- //FOOTER -->


I add the js jQuery Easing Plugin file into assets.xml and the following Code into the .css file

.back-to-top {

	background-color:transparent;

	text-align:center;

	height: 30px;

	width: 30px;

	padding-top:3px;

	cursor:pointer;

    z-index: 1000;

}



.back-to-top .fa {

	color:#aba489;

}


With Firebug I got the following error: n.easing[this.easing] is not a function (../media/jui/js/jquery.min.js) line 4.

Can anybody help? Thanks a lot.

Arnim
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
Igor Cunha
Igor Cunha
Vanity Monster Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
I did the update and continues to operate.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
Ok, it works ... but not with the T3 sourcecode. I take yours. Thanks a lot.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 8
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Arnim and Igor,

Please try this:
http://t3-framework.org/documentation/bs3-customization#back-to-top

This is the how-to steps to add "Back to top" button in T3 bs3 blan template and it could be the same for all templates developed with T3 framework.

Hope it helps you guys.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 9
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo

Please try this:
http://t3-framework.org/documentation/bs3-customization#back-to-top


Hello Gardner,

I follow the steps from this Site, but they didn't work. With the js-script I got an error. The button is visible, but with no function. When I load the page Firebug have no problems, but after pressing the page-up button I got the "n.easing[this.easing] is not a function (../media/jui/js/jquery.min.js) line 4" error message in Firebug and nothing happens. When I use Igors js code everything works fine.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 10
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Arnim,

I will check it again and get back to you soon with best solution.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 11
Igor Cunha
Igor Cunha
Vanity Monster Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Is all ok in here. With booststrap 2 and bootstrap 3, both are working for me.

Obs: Following the documentation I could not complete the job.
  Resende - Rio de Janeiro, Brazil
Visit 
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 12
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ignor,

I will check and update the documentation by Monday next week, please patient, I will get back to you guys with answer.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 13
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.