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ář“.
- 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.
- 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.
- 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, můžete posunout scrollová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>