logo

Zobraziť viac / Zobraziť menej - Po kliknutí na zobraz menej posunúť na vrch

09.09.2019 12:55
1
Zdravíčko,
po kliknutí na tlačítko "čítať menej" potrebujem, aby sa stránka posunula na vrch. Teraz sa text síce skráti, ale obrazovka ostane na tom istom mieste, kde som sa dorolloval naposledy.

Kód vyzerá takto.
Attention Required! | Cloudflare

Keď mám pod tým, ale ešte nejaké veci a kliknem na "čítať menej" tak sa text síce skráti tak ako potrebujem, ale obraz ostane na mieste do ktorého som sa vyroloval.

Potreboval by som, aby to fungovalo tak, ako na alze, po kliknutí na "skryť popis" (po kliknutí na "pokračovať")

Vedel by mi prosím niekto poradiť, ako to prepísať tak, aby sa mi po kliknutí na button "čítať menej" vyrolovala stránka na miesto kde sa nachádza <span id="dots"> ?
09.09.2019 13:07
2
V javascriptu se nevyznám, ale často ho používám na podobné menší blbosti, takže vždycky hledám na stack overflow. V tomto případě mi na dotaz "javascript scroll to element on click" vyjelo pár příkladů, např. https://stackoverflow.com/questions/...click/18071231 - je tam i čistě JS řešení.
09.09.2019 13:19
3
Toto? https://www.w3schools.com/howto/howto_js_read_more.asp
09.09.2019 13:22
4
a nieco taketo?

Kód:
element = document.getElementById("dots");

element.scrollIntoView();
(pisem to z hlavy)
09.09.2019 14:15
5
ano to je presne ten kód čo som použil, ale nerobí to to, čo potrebujem... čiže aby sa to po kliknutí na "zobraziť menej" vrátilo späť na vrch

---------- Příspěvek doplněn 09.09.2019 v 14:19 ----------

Původně odeslal ne
a nieco taketo?

Kód:
element = document.getElementById("dots");

element.scrollIntoView();
(pisem to z hlavy)
Dal som to *****sem***** (samozrejme zakaždým inde) ale nešlape.
Ja fakt niesom moc zbehlí, vedel by si mi prosím napísať, kde by som to mal hodiť aby to šlapalo?
pretože to nešlape

<script>
*****sem****
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
*****sem****
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Prečítajte si celého nákupného poradcu";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Čítať menej";
moreText.style.display = "inline";
*****sem****
}
}
</script>

---------- Příspěvek doplněn 09.09.2019 v 14:22 ----------

keby sa tam dala dať nejako kotva, ale ani tú kotvu neviem poriešiť, aby to bežalo cez ten špeciálny javascriptový button ...
09.09.2019 14:34
6
protoze tam mas id "dots" coz jsou ty tri tecky na konci textu... musis si vytvorit nejaky prvek okolo nebo na zacatek toho textu s nejakym id a ten dat do toho js...
09.09.2019 14:36
7
mas to trosku chaoticke, tak tipujem len na zaklade funkcie ktoru si uviedol, ze takto:

<script>

function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {

dots.style.display = "inline";
btnText.innerHTML = "Prečítajte si celého nákupného poradcu";
moreText.style.display = "none";
dots.scrollIntoView();

} else {
dots.style.display = "none";
btnText.innerHTML = "Čítať menej";
moreText.style.display = "inline";

}
}
</script>
pre vysvetlenie: pokial ma element display: none, tak neexistuje - to znamena ze sa nan neda odvolat..


resp. na zaciatok textu dat inu kotvu s inym ID, lebo netusim co presne je element dots.. odrazam sa k nemu, len preto lebo si to uviedol v dotaze "vyrolovala stránka na miesto kde sa nachádza <span id="dots">"

edit: nevsimol som si tvoju ukazku v prvom poste.. aj tak by malo makat co som ti napisal..
09.09.2019 15:01
8
Ještě jsem doplnil plynulé scrollování (aby to nebylo jen skokem) ke kódu od ne (který funguje bez problémů):

Attention Required! | Cloudflare
09.09.2019 15:09
9
Kto je king? Vy ste kingovia!!!
Vďaka moc chlapi...šlape