Smooth anchor scroll
HTML
<section id="anchors">
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
<a href="#6">6</a>
</section>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<a href="#anchors" class="back">Nach oben</a>
CSS
/* No need for css - just demo */
body,html {
width:100%;
height:3000px;
}
section {
display:flex;
flex-wrap:wrap;
}
section a {
margin:1em;
padding:1em;
background:orangered;
color:white;
font-weight:bold;
text-decoration:none;
border-radius:3px;
}
div {
padding:2em;
margin:1em;
background-color:orange;
border-radius:3px;
}
.back {
display:flex;
background:orangered;
color:white;
font-weight:bold;
text-decoration:none;
padding:1em;
margin:1em;
border-radius:3px;
}
JAVASCRIPT
// SMOOTH SCROLL ANCHOR LINKS
$(function() {
$('a[href*="#"]:not([href="#"])').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) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
