11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Animation Scroll

Pages :
Salut tous le monde !

J'ai aujourd'hui besoin de votre aide. J'aimerais avoir un script qui fonctionne (parce que j'en ai testé pas mal sur le net et ça ne fonctionne jamais pour moi) pour lorsque je clique sur un lien de mon menu, ça me descende à la div correspondante avec une animation comme sur ce site.

Pour le moment je n'ai pas de script et lorsque je clique sur un lien de mon menu, ça me descend bien à la bonne div mais sans aucune animation.

Voici mon code HTML : 

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<title>CV Victor</title>
<link rel="stylesheet" href="style.css"/>
 
</head>

<body>

	<div id="sidebar">
    	<div id="wrapper">
        	<div id="bmenu">
            	<ul>
        			<li><a href="#accueil">Accueil</a></li>
					<li><a href="#compétences">Compétences</a></li>
        			<li><a href="#contact">Contact</a></li>
                </ul>
        	</div>

			<img src="img/Moi2.png"/>
        
		</br>
    
    	<h1><span class="vert">Q</span>ui suis-je ?</h1>
        </br>
        <p style="text-align: justify;">Je m'appelle <span class="vert">Victor</span>, j'ai <span class="vert">17 ans</span>, je suis diplômé en <span class="vert">marketing</span> et je suis passionné par les nouvelles technologies. Mon projet futur serait de <span class="vert">devenir développeur de site internet ou d'applications mobiles</span>. Je vis près de Paris, en France et je fais du football en club <span class="vert">depuis 14 ans.</span></p>
        
        </br>
        
        <div id="social">
        	<li><a href="https://www.facebook.com/victor.dufour.142" target="_blank"><img src="img/facebooknb.png" alt="image" onmouseover="javascript:this.src='img/facebook.png';" onmouseout="javascript:this.src='img/facebooknb.png';"/></a></li>
            <li><a href="https://twitter.com/DfrVictor" target="_blank"><img src="img/twitternb.png" alt="image" onmouseover="javascript:this.src='img/twitter.png';" onmouseout="javascript:this.src='img/twitternb.png';"/></a></li>   
       	</div>
        <div id="snap">
            <li><a href="#" class="info"><img src="img/snapchatnb.png" alt="image" onmouseover="javascript:this.src='img/snapchat.png';" onmouseout="javascript:this.src='img/snapchatnb.png';"/><span class="bulle">Victor.Dufour</span></a></li>
        </div>
        </div>
	</div>



	<div id="contenu">
    	<h2 id="accueil">Accueil</h2> 
        
        <p style="text-align: justify;"><span class="vert">T</span>est
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.</p>

		<h2 id="compétences">Compétences</h2> 
        
        <p style="text-align: justify;"><span class="vert">T</span>est
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.</p>

		<h2 id="contact">Contact</h2> 
        
        <p style="text-align: justify;"><span class="vert">T</span>est
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo sem, placerat id nisi in, faucibus vestibulum turpis. Aenean placerat mollis tellus ut rhoncus. Nunc tempus orci quis nibh venenatis, id varius lacus suscipit. Nam pretium aliquet ex id ullamcorper. Quisque rutrum egestas nulla non ultricies. Nam ut consequat ex, a rhoncus nisi. Sed eu velit enim. Nam tortor arcu, ultrices sed mi eu, venenatis cursus nisl. Vivamus euismod elementum nunc semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam molestie, tellus lacinia faucibus laoreet, dolor metus egestas ligula, nec faucibus quam ex fermentum nisl. Aliquam euismod, erat eget vehicula commodo, magna ante mattis libero, ultricies ultrices orci tellus sit amet justo. Integer eros lorem, mollis id placerat ac, scelerisque ut neque. Duis a nunc eros. Ut iaculis metus vel rutrum maximus. Sed viverra dolor eu orci sollicitudin, in porta odio varius.

Quisque porttitor orci eu est elementum, in elementum nisl imperdiet. Phasellus cursus in turpis elementum varius. Proin vel ante quis arcu fringilla elementum. Integer semper risus quis lectus imperdiet, non pharetra neque mollis. Morbi molestie ex sed dolor accumsan interdum. Vivamus molestie sem est, ac aliquam tortor faucibus id. Etiam accumsan quis nisl vitae rutrum. In hac habitasse platea dictumst. Duis porta efficitur eros, et fringilla massa rutrum at. Phasellus bibendum aliquet lobortis. Phasellus convallis leo non risus gravida convallis. Pellentesque aliquam erat id tortor maximus aliquam. Vestibulum vel congue orci, vel feugiat ex.

Proin nibh nisl, ultrices eget mi eget, faucibus semper dui. Fusce fermentum lacinia vehicula. Nulla dictum bibendum euismod. Praesent arcu lacus, lobortis id pellentesque ac, commodo ac leo. Praesent ut tellus id elit eleifend dapibus quis non sapien. Duis blandit eros vel dolor malesuada pulvinar. Proin lacus erat, sagittis eget tellus sed, finibus ullamcorper diam. Sed ultricies finibus velit, nec porta tellus sagittis eget. Quisque quis maximus turpis, vitae viverra lorem. Sed aliquet nunc lacinia nisl luctus dictum non eget quam. Morbi ut imperdiet turpis.

Nulla aliquet facilisis velit, quis sagittis quam mattis nec. Aliquam vitae tincidunt ligula. Nunc metus diam, facilisis at eros vitae, sodales dapibus magna. Donec rhoncus egestas efficitur. Nunc id urna lorem. Duis sit amet maximus ante. Suspendisse in erat euismod, fringilla tellus vitae, elementum dui. Suspendisse potenti. Suspendisse imperdiet, mi nec pharetra lacinia, neque odio blandit lectus, nec dapibus ligula risus in ex. Nunc eget tortor sit amet risus imperdiet viverra at eu mi. Phasellus sagittis nisi sit amet vulputate posuere. Nam sem dui, tempus eget sagittis in, consequat ut nulla. Nam tempus, metus a egestas cursus, sem risus tristique eros, efficitur ultricies ante arcu ut erat.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.

Morbi sit amet tincidunt nunc, pulvinar lobortis diam. Duis tortor nulla, commodo mattis massa ac, fringilla convallis mauris. Vestibulum in fermentum massa. Suspendisse quis lectus porta, rutrum felis sed, venenatis est. Integer vel ex eget elit efficitur bibendum quis nec dui. Nam non tempus massa. Vivamus a metus nisi. Curabitur ac vulputate libero. Phasellus vel turpis ut erat aliquam malesuada. Aliquam consectetur, turpis sit amet semper ultricies, eros mi fringilla metus, in fermentum massa velit in ex. Aliquam et quam ac felis eleifend placerat. Sed fermentum mauris nec dui gravida, a suscipit urna mattis. In maximus justo velit, a sagittis lacus viverra a. In luctus a dui id dignissim. Donec non rhoncus lectus. Aliquam fermentum augue at ultricies sollicitudin.</p>
    </div>



    <div id="footer">
    	Site crée par <span class="vert">Victor</span>
    </div>
    
</body>
</html>


Merci d'avance aux personnes qui m'aideront Smiley smile
Modifié par Blafikox (04 Aug 2015 - 21:10)
Lorsque j'importe tous les scripts (ci-dessous) dans ma balise <head> , rien ne change, il n'y a toujours pas d'animation...

<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
 
    <script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
    <script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
     
    <script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->


Est-ce que je fais quelque chose mal ? Smiley ohwell
Merci pour ton aide ! Smiley smile
Bonjour,

S'il n'y a pas d'animation c'est que le script n'est pas chargé. Il y a donc un problème de chemin...

Sinon, pour éviter des imports de scripts, et toujours avec jQuery :
// @section     Smooth Scroll
// @description Défilement fluide
jQuery(document).on('click', 'a[href*=#]:not([href=#])', function(){
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length){
			$('html,body').animate({
				scrollTop: target.offset().top
			}, 400);
//			return false;
		}
	}
});

C'est la solution que j'ai installé sur mon framework : Scriptura.
Cadeau !

http://codepen.io/anon/pen/PqVbQv

Avec un impot de Jquery ! (que tu dois télécharger).

Actuellement j'ai ajouter une class à tes balises <a> histoire d'avoir accès sans prise de tête
Ensuite le jquery qui est écrit doit être dans un fichier .js ET être dans un .ready comme suit: 

	$(document).ready(function() {
// Ici le code Jquery tel que sur Codepen
});


Au passage, ce qui serait pas mal, je suis pas là pour juger, mais à chaque contenu d'avoir la possibilité de naviguer jusqu'au suivant /précédent ou alors un genre de Back To Menu.
Modifié par JENCAL (05 Aug 2015 - 10:19)
Salut les gars et vraiment merci à tous pour votre aide.

JENCAL et Zelalsan vous êtes des génies car c'est vraiment l'effet que je recherche.
Seulement le problème persiste..

Du côté de JENCAL : J'ajoute bien les class à mes balises <a> puis je met ce script dans mon <head> :
<script>
$(document).ready(function() {
		$('.hrefToSmooth').click( function() { // Au clic sur un élément
			var rub = $(this).attr('href'); // rub cible
			var speed = 750; // Durée de l'animation (en ms)
			$('html, body').animate( { scrollTop: $(rub).offset().top }, speed ); // Go
			return false;
		});
});
</script>

Et ça ne marche toujours pas, ça scroll toujours comme au début mais sans l'animation. Etant vraiment très nul en Jquery, je ne sais pas du tout ce qu'il faut que je télécharge.. Mais vraiment merci pour ton aide.

Passons à Zelalsan : L'animation est parfaite, mais toujours pareil, ça ne fonctionne pas chez moi. Lorsque je met le script dans ma balise <head> ça scroll comme ce que j'avais avant mais sans l'animation et quand je met le script juste avant la balise </body>, ça ne scroll plus du tout.
Je met le script comme ça : 
<script>
function scroll(e){
	
	e.preventDefault();

	var target = document.querySelector(this.hash),
		start = new Date();

	var tween = function (){
		
		var progress = (new Date - start) / 2000;
	
		(progress > 1) && (progress = 1);

		var delta  = (progress < .5) ? Math.pow(2 * progress, 2) / 2 : (2 - Math.pow(2 * (1 - progress), 2)) / 2,
			result = (target.offsetTop - window.pageYOffset) * delta + window.pageYOffset;

		window.scrollTo(0, result);

		if (progress == 1) return;

		window.requestAnimationFrame(tween);
		
	}

	tween();

}

var a = document.querySelectorAll("a"),
	i = 0,
	l = a.length;

for ( ; i<l; i++) a[i].addEventListener("click", scroll, false);
</script>


Est-ce que je fais quelque chose de mal ?
Moi et le jquery ça fait 2 donc c'est pas évident, désolé...

Merci à tous pour votre aide ! Smiley smile [/i]
rajoute ceci

<script  [b]type="text/javascript"[/b]>
</script>


Concernant JQUERY, il faut telecharger le fichier jquery (la librairie) ici
et il faut télécharger "Download the uncompressed, development jQuery 2.1.4"
tu auras du coup -> jquery-2.1.4.js.
Tu le met avec les fichiers de ton site (dans un dossier javascript si tu veux)
et ensuite dans les balises <head>

<head>
<script type="text/javascript" src="TonDossierOuPas/jquery-2.1.4.js"></script>
</head>

Modifié par JENCAL (05 Aug 2015 - 14:06)
J'ai bel et bien téléchargé le fichier jquery que tu m'as dit et ajouté les scripts.
Mon fichier jquery n'est dans aucun dossier j'ai donc mis dans mon <head> : 

<script  type="text/javascript"></script>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
		$('.hrefToSmooth').click( function() { // Au clic sur un élément
			var rub = $(this).attr('href'); // rub cible
			var speed = 750; // Durée de l'animation (en ms)
			$('html, body').animate( { scrollTop: $(rub).offset().top }, speed ); // Go
			return false;
		});
});
</script>


Et toujours pas, ça ne me scroll plus du tout quand je clique sur un lien de mon menu. A préciser que j'ai bien mis la class dans mes balises <a>.
Je ne sais pas comment faire...
Ok et si tu fais "clic droit -> inspecte l'élement" est ce que tu as un erreur dans l'onglet console ?
Désolé pour le double-post mais je suis entrain de penser qu'il peut peut-être y avoir un conflit avec le css pour je ne sais quelle raison... Puisque dans vos exemples, le css n'est pas présent.

JENCAL, est-ce que tu veux que j'upload les sources et que je te les envoies par message privé pour que tu essayes de voir ?
Ok maintenant je comprend mieux,

Les deux scripts marches, mais toi tu veux effet smooth d'un scoll d'une div, et pas DU scroll de la page.

ta div contenu tu lui as mis un scroll. les effets que nos scripts applique c'est sur le scrollbar de la page.


Si tu enleve le overflow: auto; de ta div contenue cela marche... mais je sais pas si c'est ce que tu souhaite
Modifié par JENCAL (05 Aug 2015 - 16:05)
Ah oui dans ce cas là ça fonctionne.
Le rendu est parfait, j'aime beaucoup seulement, le contenu passe par dessus le footer. Et c'est pour ça que j'avais mis une scrollbar seulement sur le contenu et que je lui avait attribué une hauteur.

Je sais pas si tu comprends ce que je veux dire...
Moi dans tous les cas j'arrive pas à lire le footer qui est en superposition avec le contenu.
Et il existe pas un script capable de faire un effet smooth scroll une div ?

Parce que ça m'embête d'enlever le footer...
Si

remplace 
$(document).ready(function() {
		$('.hrefToSmooth').click( function() { // Au clic sur un élément
			var rub = $(this).attr('href'); // rub cible
			var speed = 750; // Durée de l'animation (en ms)
			$('html, body').animate( { scrollTop: $(rub).offset().top }, speed ); // Go
			return false;
		});
});


par 
$(document).ready(function() {
	$(function() {
	  $('.hrefToSmooth').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		  var target = $(this.hash);
		  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		  if (target.length) {
			$('#contenu').animate({
			  scrollTop: $('#contenu').scrollTop() + target.offset().top - 20
			}, 1000);
			return false;
		  }
		}
	  });
	});
});
Pages :
Sujet clos
Aller à