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
<div class="menu" id="menu"> <a href="#kotva1" onclick="return kotva(this)">Kotva 1</a> <a href="#kotva2" onclick="return kotva(this)">Kotva 2</a> <a href="#kotva3" onclick="return kotva(this)">Kotva 3</a> </div> <div class="polozka"> <h1 id="kotva1">Nadpis 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reprehenderit!</p> <p>Fugit animi quos facere debitis numquam iusto alias doloremque amet!</p> <p>Quos sapiente tempora ea voluptatem esse necessitatibus et laudantium unde.</p> <p>Distinctio similique aliquam alias nesciunt commodi quas! Alias odit repellat!</p> <p>Quis sint minus quae tempora repudiandae aperiam dignissimos. Ea totam.</p> <p>Voluptatibus aliquam error exercitationem sit accusamus laudantium dolor repudiandae tempora.</p> <p>Sequi sunt iste architecto aut sapiente quo iusto velit fuga.</p> <p>Velit perferendis asperiores excepturi commodi culpa iusto ea vel odit.</p> <p>Iste doloribus distinctio adipisci quae corrupti quidem eveniet animi recusandae!</p> <p>Atque magnam sed ratione soluta aspernatur saepe officia in cumque!</p> </div> <div class="polozka"> <h1 id="kotva2">Nadpis 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reprehenderit!</p> <p>Fugit animi quos facere debitis numquam iusto alias doloremque amet!</p> <p>Quos sapiente tempora ea voluptatem esse necessitatibus et laudantium unde.</p> <p>Distinctio similique aliquam alias nesciunt commodi quas! Alias odit repellat!</p> <p>Quis sint minus quae tempora repudiandae aperiam dignissimos. Ea totam.</p> <p>Voluptatibus aliquam error exercitationem sit accusamus laudantium dolor repudiandae tempora.</p> <p>Sequi sunt iste architecto aut sapiente quo iusto velit fuga.</p> <p>Velit perferendis asperiores excepturi commodi culpa iusto ea vel odit.</p> <p>Iste doloribus distinctio adipisci quae corrupti quidem eveniet animi recusandae!</p> <p>Atque magnam sed ratione soluta aspernatur saepe officia in cumque!</p> </div> <div class="polozka"> <h1 id="kotva3">Nadpis 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reprehenderit!</p> <p>Fugit animi quos facere debitis numquam iusto alias doloremque amet!</p> <p>Quos sapiente tempora ea voluptatem esse necessitatibus et laudantium unde.</p> <p>Distinctio similique aliquam alias nesciunt commodi quas! Alias odit repellat!</p> <p>Quis sint minus quae tempora repudiandae aperiam dignissimos. Ea totam.</p> <p>Voluptatibus aliquam error exercitationem sit accusamus laudantium dolor repudiandae tempora.</p> <p>Sequi sunt iste architecto aut sapiente quo iusto velit fuga.</p> <p>Velit perferendis asperiores excepturi commodi culpa iusto ea vel odit.</p> <p>Iste doloribus distinctio adipisci quae corrupti quidem eveniet animi recusandae!</p> <p>Atque magnam sed ratione soluta aspernatur saepe officia in cumque!</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu {position: fixed; top: 0; left: 0; background: #0D6AB7; width: 100%; opacity: .8; text-align: center;} .menu a {display: inline-block; color: #fff; padding: .2em 1em; line-height: 2em} body {padding-top: 2em} /* Aby se stránka víc natáhla */ p {padding: 2em 0}
CSS
Autoformát
CSS reset
Až na konci
function kotva(kotva) { location.hash = kotva.hash; var top = document.documentElement.scrollTop || document.body.scrollTop; top = top - document.getElementById("menu").offsetHeight - 23; document.body.scrollTop = document.documentElement.scrollTop = top; return false; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>