<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://lintermediaire.be/wp-content/themes/lintermediaire/favicon.png" 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%);
bottom: 20px;
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*/
View Compiled
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('i').fadeIn()
} else {
$('i').fadeOut()
}
})
$('a[href^="#"]').click(function(e){
e.preventDefault()
var the_id = $(this).attr("href")
$('html,body').animate({
scrollTop:$(the_id).offset().top - 40
}, 'slow')
});
