Ajouter un mode d’affichage supplémentaire à l’excellent plug-in jQuery ScrollUp de Mark Goodyear.

scrollUp


jQuery(function () {
jQuery.scrollUp({
scrollDistance: 300, // Distance from top/bottom before showing element (px)
scrollText: "${trans: m.<nom_du_module>.fo.back-to-top,ucf}" // Text for element, can contain HTML
});

function scrollup_anchor_position()
{
var scrollup_window_width = jQuery(window).width();
var scrollup_margins_width = scrollup_window_width - 960;
var scrollup_block_right = (scrollup_margins_width / 2) - 80;

var scrollup_footer_height = jQuery('#footer').height();
var scrollup_distance_from_bottom = scrollup_footer_height + 40;

jQuery('a#scrollUp').css('right', scrollup_block_right);
jQuery('a#scrollUp').css('bottom', scrollup_distance_from_bottom);
}

scrollup_anchor_position();
jQuery(window).resize(function(){ scrollup_anchor_position() });

jQuery('a#scrollUp').wrapInner('');
jQuery('a#scrollUp').append('');

});



/* Image style */
#scrollUp{
height: 60px;
line-height: 60px;
}

#scrollUp .scrollup-image{
background-color: #000;
background-image: url(/media/scrollup-arrow.png);
background-position: center center;
background-repeat: no-repeat;
width: 60px;
height: 60px;
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
opacity: 0.4;
}

#scrollUp .scrollup-label{
position: absolute;
left: -99999em;

background-color: #000;
color: #fff;
padding: 0 20px;
display: inline-block;
vertical-align: top;
}

#scrollUp:hover .scrollup-image{
-webkit-border-radius: 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0;
-o-border-radius: 0 8px 8px 0;
-ms-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
opacity: 1;
}

#scrollUp:hover .scrollup-label{
position: relative;
left: 0;
text-transform: uppercase;
text-decoration: none;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-o-border-radius: 8px 0 0 8px;
-ms-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

@media only screen and (max-width : 1024px) {
#scrollUp{
display: none;
}
}