Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<body style="height:2000px;border:10px solid black;padding:50px">
<h2>Beim runter scrollen wird ab einer gewissen h&ouml;he der Back to the top Botton eingeblendet</h2>
<div id="info" style="position:fixed;top:100px;left:40%;height:100px;width:300px;border:2px solid black;background:black;color:white"></div>
</body>
<script>
var bb=10;
var lnk = document.createElement('div');
    lnk.id = 'back_to_top';
    lnk.className = 'back_to_top';
lnk.innerHTML='<a id="back_to_top1" href="#top" class="back-to-top">Nach oben</a>';
     document.body.appendChild(lnk);
  $("#back_to_top").hide();
 
 $(window).scroll(function () {
 var sammeln=$(this).scrollTop()+'<br>Einblenden bei '+bb+' Pixel';

            if ($(this).scrollTop() > bb) {  
     
 
                $('#back_to_top').fadeIn();
            } else {
                $('#back_to_top').fadeOut();
            }
            
         $('#info').html(sammeln);
        });

        $('#back_to_top').click(function () {  
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
 

 $("#back_to_top").css({'position':'fixed','display':'none','bottom':'10px','right':'20px','z-index':'99','border':'1px solid black','outline': 'none','background-color':' red','color':' white','cursor': 'pointer','padding': '15px','border-radius':' 10px'});

</script>