Partage
  • Partager sur Facebook
  • Partager sur Twitter

La fonction scroll() ne fonctionne pas...

lulu511008
2 mai 2017 à 11:21:25

Bonjour à toutes et à tous,

Ayant voulu au préalable utiliser ScrollReveal pour mon site internet que je produis, ceci n'étant pas compatible avec mon code (allez savoir pourquoi, bref j'ai laissé tomber..) j'ai quand même voulu faire des petits tests pour faire mes propres animations avec la méthode scroll de la librairie Jquery.

Et il se trouve qu'avec le morceau de code suivant :

<script>
$(document).ready(function(){
console.log($('#scrolling').height());
$('#btn').click(function(){$('#scrolling').scrollTop()});
});
</script>

Ça ne fonctionne même pas....

C'est pourtant super simple...

Voici mon code en entier:

<?php session_start();?>
<!DOCTYPE>
<HTML class="no-js" lang="fr">
<HEAD>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Le Sporting</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/png" href="icons/logo.png"/>
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<link rel="stylesheet" href="../css/vendor.css">
	<link rel="stylesheet" href="../css/personnalise.css">
	<link rel="stylesheet" id="theme-style" href="../css/app.css">
	<link rel="stylesheet" id="theme-style" href="../css/app-blue.css">
</HEAD>
<BODY id="home">
	<div class="cont col-xs-12">
		<nav id="nav" class="col-xs-12 col-sm-8 col-sm-offset-2">
			<aside><img src="../img/logo.png"/></aside>
			<form class="recherches" role="search">
				<div class="input-container"> 
					<i class="fa fa-search">
					</i> <input type="search" placeholder="Rechercher...">
					<div class="underline"></div>
				</div>
			</form>
		</nav>
	</div>
	<div class="bread col-xs-12">
		<div class="col-xs-12 col-sm-8 col-sm-offset-2">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="../index.php"><i class="fa fa-chevron-left"></i> Accueil</a></li>
				<li class="breadcrumb-item active">À propos</li>
			</ol>
		</div>
	</div>
	<div>Haut de page</div>   
    <div id="scrolling" style="height:1200px"></div>
	<button id="btn">Click</button>
    <div>Bas de page</div>
	<script src="../js/vendor.js"></script>
	<script src="../js/app.js"></script>
	<script type="text/javascript" language="javascript">
	$(document).ready(function(){
	console.log($('#scrolling').height());
	$('#btn').click(function({$('#scrolling').scrollTop()});
	});
    </script>
</BODY>
</HTML>

Quelqu'un peut-il m'aider s'il vous plaît ?


  • Partager sur Facebook
  • Partager sur Twitter
YoplaHips
2 mai 2017 à 11:42:47

as tu pensé à initialisé jquery? 

<head>
<script src="jquery-3.2.1.min.js"></script>
</head>



  • Partager sur Facebook
  • Partager sur Twitter
Radiax18
  • Javascript
2 mai 2017 à 12:08:45

Salut,

je t'invite à faire un tour sur mon topic car j'ai eu le même problème avec Bootstrap 4. J'ai trouvé la solution en modifiant le lien jQuery que j'utilisait et tout fonctionne ;)

Par contre je ne sais pas comment faire pour insérer un décalage car ma navbar étant en "position: sticky", elle cache le début de la div cible...

EDIT: il suffit d'utiliser une fonction de jQuery permettant de prendre la taille d'une div (ici <nav>) et de prendre en compte ce paramètre dans la cible du scrollTop.

$(document).ready(function() {
	
	/* height navbar */
	var navbarHeight = $('nav').height();
	//alert("Navbar height: " + navbarHeight);
	$("body").attr("data-offset", navbarHeight);
	
	/* clic href id */
	$('a[href^="#"]').click(function(){
		scrollToTop(this);
	});
	
	
	
	/* animation scroll */
	function scrollToTop(id) {
		var goToId = $(id).attr('href');
		//alert("goToId: " + goToId);
		$('html, body').animate({
			scrollTop: $(goToId).offset().top - navbarHeight
		}, 500);
		return false;
	}
	
});

En espérant t'avoir aidé ;)

-
Edité par Radiax18 2 mai 2017 à 14:46:15

  • Partager sur Facebook
  • Partager sur Twitter

</radiax>

lulu511008
9 mai 2017 à 16:04:42

Bonjour à tous,

Oui ça n'était qu'un problème de lien Jquery si mes souvenirs sont bons :)

Merci à vous.

  • Partager sur Facebook
  • Partager sur Twitter
RutheZadi
28 mars 2024 à 7:36:29

Bonjour  à tous 

Pour une animation de révélation par défilement J'ai copié un lien JS sur mon site depuis la librairie srollreveal mais cela ne fonctionne toujours pas j'ai besoin d'aide SVP.

-
Edité par RutheZadi 28 mars 2024 à 8:05:46

  • Partager sur Facebook
  • Partager sur Twitter
Lamecarlate
  • Javascript
28 mars 2024 à 8:41:09

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)