Wiki CgX

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


code:js:ontop

Bouton "On-top" au scroll

Attention, c'est dépendant de jQuery, evidemment !

Introduction

Permet d'afficher un élément pour remonter en haut d'une page, une fois qu'on a atteint un certain scroll de la page totale

ontop.js
	$(document).on( 'scroll', function()
		{
		var dheight=$('body').height()-$(window).height();
 
		if ($(this).scrollTop()>=dheight*.75  && !$('.ontop').hasClass("ontop_showed")  && dheight>0)
			$('.ontop').addClass("ontop_showed");
		else if ($(this).scrollTop()<dheight*.75  && $('.ontop').hasClass("ontop_showed"))
			$('.ontop').removeClass("ontop_showed");
		});

Explication

Ici c'est à 75% du défilement total que l'élement .ontop acquiert la classe ontop_showed

Il suffit de décrire l'élement en HTML :

	<div><a href="#" class="ontop">^</a></div>

Effet au click

On peut même rajouter de quoi faire un scroll smoothy

$('.ontop').click(function()
	{
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
	});
code/js/ontop.txt · Dernière modification : 23 Nov 2020 :: 15:16 de CgX