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>


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0