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
<ul id="top"> <li><a href="#a1">sekcia 01</a></li> <li><a href="#a2">sekcia 02</a></li> <li><a href="#a3">sekcia 03</a></li> <li><a href="#a4">sekcia 04</a></li> <li><a href="#a5">sekcia 05</a></li> </ul> <div id="a1">sekcia 1 <a href="#top">hore</a></div> <div id="a2">sekcia 2 <a href="#top">hore</a></div> <div id="a3">sekcia 3 <a href="#top">hore</a></div> <div id="a4">sekcia 4 <a href="#top">hore</a></div> <div id="a5">sekcia 5 <a href="#top">hore</a></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body, ul { margin:0; padding:0; } ul { padding:20px 0; } div { margin-bottom:800px; background:red; padding:10px; } div > a { margin-left:50px; }
CSS
Autoformát
CSS reset
Až na konci
/** * @constructor */ var AnchorScroll = function () { /** @type {AnchorScroll} */ var self = this; /** @type {Array} */ var elements = []; /** * @param {Element} element */ this.scrollTo = function (element) { if (element === null || !!element === false) { return; } /** @type {Number} */ var position = element.getBoundingClientRect().top; /** @type {Number} */ var shift = Math.round(Math.abs(position) > 1 ? position / 5 : position); window.scrollBy(0, shift); if (position - element.getBoundingClientRect().top) { setTimeout(function () { self.scrollTo(element); }, 30); } }; /** * @param {{hash:string}|Element} anchor * @returns {boolean} */ this.scrollThrough = function (anchor) { /** @type {string} */ var anchorHash = anchor.hash; if (!!anchorHash === false || anchorHash.length < 2 || anchorHash.indexOf('#') !== 0) { return true; } /** @type {Element} */ var element = document.querySelector(anchorHash); if (element !== null || !!element === true) { self.scrollTo(element); } else { return true; } return false; }; /** * @param {object} object * @returns {string} */ this.getType = function (object) { /** @type {string} */ var objStr = Object.prototype.toString.call(object); objStr = objStr.split(' ')[1].toLowerCase(); return objStr.substring(0, objStr.length - 1); }; /** * @param {Element|Array|NodeList} element */ this.bind = function (element) { if (element === null || !!element === false) { return; } /** @type {number} */ var i; if (self.getType(element) === 'array' || self.getType(element) === 'nodelist') { for (i = 0; i < element.length; i++) { if (!elements.hasOwnProperty(element[i])) { elements.push(element[i]); } } } else { elements.push(element); } }; this.init = function () { /** @type {number} */ var i; for (i = 0; i < elements.length; i++) { elements[i].onclick = function () { return self.scrollThrough(this); }; } }; }; var animateScroll = new AnchorScroll(); /* Tuto to zavoláme*/ /* nájdeme všetky elementy na ktoré chceme klikať*/ var anchors = document.querySelectorAll('a'); /*tieto elementy pridáme do zoznamu*/ animateScroll.bind(anchors); /* prípadne iba tie ktoré obsahujú kotvu */ var sharpAnchors = document.querySelectorAll('[href^="#"]'); /*tieto elementy pridáme do zoznamu*/ animateScroll.bind(sharpAnchors); // zoznam môžeme naplnať viac krát //animateScroll.bind(anchors); //animateScroll.bind(anchors); // alebo môžeme pridať aj jeden element animateScroll.bind(document.querySelector('a')); // a tu sa to aktivuje animateScroll.init();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>