Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BackToTop</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div id="section1" class="container-fluid"> <h1>Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p> </div> <div id="section2" class="container-fluid"> <h1>Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p> </div> <div id="section3" class="container-fluid"> <h1>Section 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p> </div> <div id="section4" class="container-fluid"> <h1>Section 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p> </div> <div id="section5" class="container-fluid"> <h1>Section 5</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p> </div> <!-- BackToTop Button --> <a href="javascript:void(0);" id="scroll" title="Scroll to Top">Top<span></span></a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#scroll { position:fixed; background:#e74c3c; right:14px; bottom:14px; opacity:0; transition:0.25s; cursor:pointer; width:52px; height:52px; display:block; text-indent:-9999px; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px } #scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff } #scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; } .container-fluid, body { background: 100% 100% no-repeat fixed; border-radius: 60px; } body { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22%23F3A39B%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); } #section1 { height: 200px; background-color: gray; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22yellow%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); } #section2 { height: 500px; background-color: yellow; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22blue%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); } #section3 { height: 800px; background-color: blue; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22red%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); } #section4 { height: 1200px; background-color: red; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22green%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); } #section5 { height: 2000px; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2270%22%20height%3D%2270%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2230%22%20fill%3D%22gray%22%20cy%3D%2230%22%20r%3D%2225%22%2F%3E%3C%2Fsvg%3E"); background-color: green; } .modra { background-color: blue; } .cervena { background-color: red; } .zelena { background-color: green; } .seda { background-color: gray; } .zluta { background-color: yellow; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>