Jak udělat odkaz s posunem na určité místo na stránce

Návod jak udělat odkaz na určité místo na nějaké stránce – šablona Divi

určitě jste se s tím někdy setkali, buď na onepage webu, kdy kliknete v menu na nějakou položku a stránka se automaticky posune níže na danou sekci nebo kliknete na nějaké tlačítko na jedné stránce a odkaz Vás dostane např. do poloviny stránky druhé.

Je to jednoduché, ukážeme si tedy jak na to. Chceme např. abychom měli na stránce udelam-web.cz/cenik tlačítko s názvem “Poslat zprávu” a po kliknutí, aby se zákazník dostal na stránku “Kontakt” a celá stránka, aby se mu posunula dolů přímo na kontaktní formulář nad kterým je nadpis “Kontaktní formulář”.

1. Každý prvek v Divi šabloně ať je to sekce nebo řádek či třeba kontaktní formulář můžete pomocí ozubeného kolečka nějak nastavovat.
2. My tedy nastavíme nejprve na stránce Kontakt pro nadpis “Kontaktní formulář”  CSS identifikaci. A jak na to a kde to najít? Když vyberete u nadpisu ozubené kolečko, dostanete se do NASTAVENÍ, kliknete na záložku POKROČILÉ a rozkliknete ID a třídy CSS, zde najdete kolonku CSS identifikace a napíšete nějaký název.např. a1 a uložíte.
3. Jdeme pak do úprav stránky Ceník, vložíme na požadované místo na stránce tlačítko, v nastavení tlačítka najdeme v první záložce OBSAH kolonku Odkaz, kde vyplníme URL stránky, na kterou chceme skočit a za to napíšeme hash a název CSS identifikace, kterou jsme si před chvilkou napsali, tedy https://udelam-web.cz/cenik#a1 nezapomeňte si URL a CSS identifikaci upravit podle Vašeho webu.

A je to, funguje Vám to?

Pokud Vám skáče odkaz tak, že není ještě zcela vidět určitá sekce či jen polovina nadpisu nadpisu, můžete posunout scrolování ještě tímto scriptem, script vložíte do Divi – Nastavení šablony – Integrace.

<script>
document.addEventListener(‘DOMContentLoaded’, function(event){

if (window.location.hash) {
// Start at top of page
window.scrollTo(0, 0);

// Prevent default scroll to anchor by hiding the target element
var db_hash_elem = document.getElementById(window.location.hash.substring(1));
window.db_location_hash_style = db_hash_elem.style.display;
db_hash_elem.style.display = ‘none’;

// After a short delay, display the element and scroll to it
jQuery(function($){
setTimeout(function(){
$(window.location.hash).css(‘display’, window.db_location_hash_style);
et_pb_smooth_scroll($(window.location.hash), false, 800);
}, 700);
});
}
});
</script>

Případně můžete vyzkoušet tento script:

<script>
document.addEventListener(‘DOMContentLoaded’, function(event){
// is there a hash in the URL indicating the use of the anchor tag?
if (window.location.hash) {
// Start at top of page
window.scrollTo(0, 0);
// Prevent default scroll to anchor by hiding the target element
var db_hash_elem = document.getElementById(window.location.hash.substring(1));
window.db_location_hash_style = db_hash_elem.style.display;
db_hash_elem.style.display = ‘none’;
// After a short delay, display the element and scroll to it
jQuery(function($){
setTimeout(function(){
$(window.location.hash).css(‘display’, window.db_location_hash_style);
et_pb_smooth_scroll($(window.location.hash), false, 300);
}, 500);
});
}
});
</script>