Go to the Top Button
Wie kann man einen Go to The Top-Button einbinden?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<style>
body{
height:1000px;
display:flex;
width:100vw;
flex-direction:column;
}
main{
height:900px;
display:block;
background:lightgreen;
}
.backToTop {
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 46px;
height: 46px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<main>
MAIN
</main>
<footer class="container">
<p>© 2017-2018 Test · <a>Datenschutzerklärung</a> · <a>Impressum</a></p>
</footer>
<a class="backToTop" href="#" onclick="return false;" style="display: inline;">GO TOP</a>
<script>
$(document).ready(function(){
$(".backToTop").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.backToTop').fadeIn();
} else {
$('.backToTop').fadeOut();
}
});
$('.backToTop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
</body>
</html>