Back To Top (version 0.4.3)
Back To Top installs and assigns a module featuring a "back to top" arrow.Screenshots
Known Issues & Limitations
Fixed Issues
[+]Installation & Update
To add this Profile repository to your Tiki add the line below to your Admin (Control Panels) → "Profiles" → "Advanced" tab → "Repository URLs" text area:https://profiles.luciash.eu/profiles
If you do an update please do not forget to unassign the previous version in Modules, otherwise you will end up with multiple modules applied.
From your Tiki → Admin home → Profiles admin panel by hitting the Apply Now button (or Forget and Re-apply to update) the following YAML code will be applied:
YAML
objects:
-
type: module
data:
name: Back To Top 0.4.3
position: bottom
order: 1
params:
nobox: y
custom: |
<style type="text/css">{literal}
.backtotop {
bottom: 3rem;
position: fixed;
right: 3rem;
z-index: 1;
}
.backtotop a:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(255, 255, 255, 0.5);
border-style: none solid solid;
border-width: 0 1rem 1.5rem;
content: "";
display: block;
left: 0.5rem;
position: absolute;
top: 0.6rem;
}
.backtotop a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
border-radius: 12.8rem !important;
color: rgba(255, 255, 255, 0.5);
display: block;
font-size: 400%;
height: 3rem;
line-height: 58%;
margin-right: 0;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-indent: -999rem;
width: 3rem;
}
.backtotop a:active, .backtotop a:focus {
outline: none;
}
{/literal}</style>{jq}{literal}
$('.backtotop').hide();
function backtotop(){
var scrolled = $(window).scrollTop();
if (scrolled > 0) {
$('.backtotop').fadeIn();
} else {
$('.backtotop').fadeOut().removeAttr('style');
}
}
$(window).scroll(function(e){
backtotop();
});
$('.backtotop a').click(function(event){
event.preventDefault();
$('html,body').animate({
scrollTop:$('body').offset().top
}, 1000);
});
{/literal}{/jq}<div class="backtotop"><a href="#top" title="Back To Top">⌅</a></div>Usage
This profile creates a custom module with a link "Back To Top" of the page. It will put the jQuery Smarty block code in it which is contained within the profile's "custom:" part in the YAML code to the module body. The module will be assigned to the bottom zone.A triangle pointing up in a semi transparent circle should appear near the bottom right edge of the viewport. Clicking it will scroll the page back to top if you scrolled down a bit.