| [JS] Conflit scrollbar personnalisée / bouton retour en haut |
Titre du sujet : [JS] Conflit scrollbar personnalisée / bouton retour en haut
par MrBeignet sur 14/07/2016 20:17:48
Bonjour, j'ai un conflit entre ma scrollbar personnalisée et mon bouton "Revenir en haut"...
En gros quand j'enlève mon thème de scrollbar, le bouton apparaît mais si je remet normalement, alors le bouton disparaît complètement.
Script scrollbar:
<script>
(function($){
jQuery(window).load(function(){
$("body").mCustomScrollbar({
theme:'<?= $theme_scrollbar ?>'
});
});
})(jQuery);
</script>
($theme_scrollbar est définie dans mon fichier config.php et dedans c'est "minimal-dark")
Script dans un fichier distant de mon bouton (retour en haut):
jQuery(document).ready( function () {
// Add return on top button
jQuery('body').append('<div id="returnOnTop" title="Retour en haut"> </div>');
// On button click, let's scroll up to top
jQuery('#returnOnTop').click( function() {
jQuery('html,body').animate({scrollTop: 0}, 'slow');
});
});
jQuery(window).scroll(function() {
// If on top fade the bouton out, else fade it in
if ( jQuery(window).scrollTop() == 0 )
jQuery('#returnOnTop').fadeOut();
else
jQuery('#returnOnTop').fadeIn();
});
CSS de mon bouton au cas ou:
#returnOnTop {
background: url('img/return_on_top.png') no-repeat;
bottom: 1%;
cursor: pointer;
display: none;
filter: alpha(opacity = 50); /* IE < 8 */
height: 48px;
opacity: 0.5;
position: fixed;
right: 1%;
width: 48px;
}
#returnOnTop:hover {
filter: alpha(opacity = 100); /* IE < 8 */
opacity: 1;
}
Dites moi s'il manque une précision ! Merci  !
|
|
