< >

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="inpu"></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);
});
$('#return-bottom').click(function(){
 setTimeout(function(){
  $.ajax({
        type: "GET",
        url: "http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte/karussell_slider.php",
 
        success: function(data){
           $("#inpu").html(data);
        
          // location.reload();
          } 
     });
 },200);
});
</script>
</body>
</html>