<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Scroll To Top + Ancres dynamiques</title>
</head>
<body>
  <div id="tete">
    <div id="titre">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/942387/profile/profile-80_1.jpg" alt="Logo" title="logo" />
      <h1>L'interMEDIAire</h1>
    </div>
    <ul id="menu" class="">
    <li><a href="#Accueil">Accueil</a></li>
    <li><a href="#Portfolio">Portfolio</a></li>
    <li><a href="#Blog">Ce Blog</a></li>
    <li><a href="#Contact">Contact</a></li>  
    </ul>
  </div>
  <div id="contenu">
  <h2 id="Accueil">Accueil </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vitae animi consequatur ut sunt dicta voluptatibus quis voluptate neque cum aut praesentium, atque velit mollitia eveniet delectus ducimus vero, quidem.</p>
    <hr />
    <h2 id="Portfolio">Portfolio </h2>
    <img src="http://fillmurray.com/1280/960" alt="" />
    <hr />
    <h2 id="Blog">Mon Blog</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, et amet.<br><br>Similique at architecto minima qui quo dolorum quas ratione, alias, laudantium repudiandae libero. Ad reprehenderit harum, eos aut magni?</p>
    <hr />
    <a href="www.lintermediaire.be" target="_blank">Mon blog</a>
    <h2 id="Contact">Contact</h2>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10112.733772719082!2d4.26413945!3d50.67941985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2afe54248a11e62f!2sBISTRO+RACINE!5e0!3m2!1sfr!2sbe!4v1481975799405" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
      <a href="#tete"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
  </body>
</html>
<!-- Design by l'interMEDIAire -->
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris3:       rgba(204,204,204,1);

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 600px;
  background: $noirfonce;
  font-size: 1em;
  color: $blanc;
  overflow-x: hidden;
}

    
    a {
      margin: 0px 10px;
      color: $gris3;
      text-decoration: none;
      transition: all .7s ease;
    }
    
    a:hover {
      color: white;
    }

#tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100vw;
  height: 75px;
  padding: 10px 15px;
  background: $noir;
  border: 0px solid $gris;
  border-bottom-width: 5px;
  
  #titre {
    display: flex;
    align-items: baseline;
    
    img {
      width: auto;
      height: 50px;
    }
    
    h1 {
      margin-left: 10px;
      font-size: 1.4em;
    }
  }
  
  #menu {
    display: flex;
    margin: 0px;
    padding: 30px 0px 0px;
    list-style: none;
    }
}

#contenu {
  padding: 10px 15px;
  background: $noirfonce;
  transition: all .7s ease;
  
  h2 {
    color: $bleu;  
  }
  
  p {
    font-size: .9em;
    line-height: 1.4em;
  }
  
  a {
    color: $rose;
    text-decoration: none;
    transition: all .7s ease;
  }
  
  a:hover,a:active{
    color: $blanc;
  }
  
  hr {
    display: block;
    margin: 30px 0px;
    border: 1px solid $gris;
  }
  
  img {
    display: block;
    margin-top: 10px;
    width: 100%;
    height: auto;
  }
}

i {
  position: fixed;
  left: calc(50% + 320px);
  bottom: 10px;
  padding: 10px 15px;
  background: $noir;
}

i:hover,i:active {
  opacity: .8;
}

@media screen and (min-width: 640px) {
  body {
    background: $gris;
  }
  
  #contenu, #tete {
    margin: 0px auto;
    width: 640px;
  }
  
  #contenu {
    min-height: calc(100vh - 70px);
  }
}
/*Design by l'interMEDIAire*/
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
		$('i').fadeIn();
	} else {
	  $('i').fadeOut();
	}
});

$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");
	$('html,body').animate({
		scrollTop:$(the_id).offset().top
	}, 'slow');
	return false;
});

External CSS

  1. https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js