sprunglisten_und_jquery_laden.php
Quell Code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body{
height:1500px;
}
#a{
margin-top:1400px;
}
a{
margin-left:10%;
background:lightblue;
cursor:pointer;
}
#kreis{
width:100px;
height:100px;
background:red;
border-radius:50%;
margin-top:600px;
}
#inpu{
margin-left:calc(50% - 400px);
position:absolute;
top:1500px;
border:2px solid black;
display:inline-block;
overflow:scroll;
height:500px;
width:800px;
}
</style>
<a href="javascript:void(0)" onclick="window.scrollTo(document.getElementById('kreis').offsetLeft,document.getElementById('kreis').offsetTop)">ZumBallScrollen</a>
<a name="id2"></a>
<a href="#id1">Nach unten mit Html</a>
<a id="return-bottom">Runter Scrollen mit Jqery</a>
<div id="kreis"></div>
<div id="a">
<a href="javascript:void(0)" onclick="window.scrollTo(0, 0);">Nach oben mit Javascript</a>
<a href="#id2">Nach oben mit Html</a>
<a id="return-top">Rauf Scrollen mit Jqery</a>
<a name="id1"></a>
</div>
<script>
$('#return-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
$('#return-bottom').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 1100 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>