Sie sind hier : basti1012.de/ 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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>