Remplacer le backtotop

[augras 290]

Bonjour,

Depuis quelques temps j'ai remplacé sur mes sites le backtotop de zwii par un autre qui permet également de descendre en bas de page, de régler la vitesse de descente/montée (la même pour les deux sens) et d'interrompre cette montée/descente par un simple clic, ou un appuie sur n'importe quelle touche du clavier, ou encore en utilisant la molette de la souris.

Je l'ai également installé sur mon piwigo, pas du tout cette fonction sur piwigo, qui héberge les plus de 40000 photos familiales avec des albums de plusieurs centaines de photos, voire milliers pour quelques uns et c'est vraiment très pratique de pouvoir parcourir la page des vignettes en interrompant le scroll_up ou down à la demande.

J'en suis très satisfait et je vous donne donc le "truc" qui est très simple.

 

Tout d'abord il faut "supprimer" le backtotop en place en mettant le code suivant dans votre custom.css

/*---------------------------------------
   suppression bouton backToTop de zwii
----------------------------------------*/
#backToTop {
  display: none !important;
}
.zwiico-up {
  display: none !important;
}

et ajouter le nouveau avec ce code 

/*---------------------------------------
   ajout bouton scroll-down/scroll-top
----------------------------------------*/
.scroll-page {
	font-size: 20px;
	background-color: #000000; /* Scroll bg color */
	border-radius: 3px;
	color: #ffffff;
	opacity: 0.5;
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 9999;
	display: none;
	cursor: pointer;
}

.scroll-page i {
	background: url('../file/source/sprite.png'); /* PNG fallback */
	background-image: url('../file/source/sprite.svg'); /* SVG image */
	background-repeat: no-repeat;
	color: inherit;
	display: block;
	width: 38px;
	height: 35px;
	padding: 15px;
}

.scroll-page .scroll-up {
	background-position: -26px 10px;
	padding-bottom: 5px;
}

.scroll-page .scroll-down {
	background-position: 10px 5px;
	padding-top: 5px;
}

.notouch .scroll-page:hover {
	opacity: 0.8;
}

.rtl .scroll-page {
	right: auto;
	left: 25px;
}

En regardant ce code de prêt vous vous rendez compte qu'il faut les fichiers sprite.png et sprite.svg dans le dossier site/file/source : ils sont en pièce jointe. Vous pouvez changer ces fichiers pour mettre ce que vous voulez comme flèches.

 

Il faut ensuite mettre dans le body le script suivant

<!-- bouton scroll-up/scroll-down à la place de celui d'origine -->
<div class="scroll-page">
	<i class="scroll-up"></i>
	<i class="scroll-down"></i>
</div>

<script>

(function($) { // Avoid conflicts with other libraries

'use strict';

$(function() {
	var settings = {
			min: 150,
			scrollSpeed: 10000
		},
		button = $('.scroll-page'),
		buttonHidden = true;

	$(window).scroll(function() {
		var pos = $(this).scrollTop();
		if (pos > settings.min && buttonHidden) {
			button.stop(true, true).fadeIn(4000);
			buttonHidden = false;
		} else if(pos <= settings.min && !buttonHidden) {
			button.stop(true, true).fadeOut(4000);
			buttonHidden = true;
		}
	});

	var scrollPage = function() {
		$('html, body').animate({
			scrollTop: ($(this).hasClass('scroll-up')) ? 0 : $(document).height()
		}, settings.scrollSpeed);
	};

	$('.scroll-page > i').bind('click touchstart', scrollPage);
  
  <!-- STOP scroll-up/scroll-down dès que scroll de la page clic dans la page scroll avec molette de la souris appuie sur une touche du clavier -->
  $('html, body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(){
    $('html, body').stop();
  });
  
});
})(jQuery);
</script>

Le paramètre scrollSpeed est celui à modifier : c'est en milliseconde et si votre site a des pages très longue ne pas hésiter à mettre 15000 ou plus... attention car si une page est plus courte le temps pour aller en haut ou en bas reste le même !

 

Et c'est tout.

 

Si vous voulez voir ce que ça donne : https://augras.eu/zwii91dev59

 

Philippe

 

 

 

 

flèches.zip

Modifié 17 janvier par augras
correction code

[roger 302]

Merci Philippe pour le partage de ton idée, en effet monter ou descendre dans une page peut être important si celle ci est fort longue à lire dans toute sa hauteur.

 

je remarque juste un seul inconvénient (j'ai suivi le lien vers ton site où il est implanté), ce script ne permet pas de monter ou descendre dans une page dés lors que sa résolution d'écran est intérieure à une certaine hauteur...donc responsivement les petits écrans et touti... bin ils n'ont pas les boutons apparents du slide haut/bas

il y a une heure, augras a dit :

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) { .scroll-page { display: none !important;

c'est le code qui masque les boutons avec toute résolution inférieures...

Et avec une tablette ou un smartphone....c'est pas pratique tandis que le script du bouton zwii lui apparait sur tout les écrans.

[augras 290]

Tu as parfaitement raison : c'est quelque chose que j'avais remarqué... et oublié !

Il suffit de retirer le code que tu indiques pour que cela fonctionne sur tous les écrans : je modifie le post initial.

Merci @roger : heureusement que tu as l'oeil !

[roger 302]

@augras

De rien Philippe car tu fais la même chose pour moi quand j'ai besoin que l'on me dise si mes "trucs" marchent.

Alors c'est normal pour moi de te remonter l'info si possible avec le bout de code qui provoque le "malaise", ainsi tu peux aussitôt le corriger à ton plus grand bénéfice.

On est habitué tout les deux à avoir un œil qui traîne partout non? Alors autant en faire profiter les amis.

Modifié 9 janvier par roger