Scroll na specifičen element id
 
wssrpnc 18. jul 2013 09:53:53 Pridružen od:
22. feb 2011
1022 objav
762 169 20
#1

Vem, da obstaja ogromno tega že spisanega, ampak ne najdem za dotičen primer.



Na vrhu strani želim izpostaviti 4 gumbe (ali linke, ni pomembno), po kliku na določenega pa se seveda stran poscrolla navzdol, na določen naslov.



Button1 na heading id=1

Button2 na heading id=2

Button3 na heading id=3.....



Ima kdo povezavo, nasvet,... Hvala lepa.


všeč(0) ni všeč(0) spam(0)
 
tsu 18. jul 2013 09:58:40 Pridružen od:
16. jun 2008
351 objav
482 34 14
#2

http://www.w3schools.com/html/html_links.asp



Narediš enostavno povezavo


<a href="#idElementa">Če klikneš tukaj, te poskroola na element z idjem #idElementa</a>

Na koncu moreš met pa še link z elementom:


<a id="idElementa">Element</a>
všeč(1) ni všeč(0) spam(0)
LinkedIn, @deveti, Si shell:aff link ;)
 
nas-t1 18. jul 2013 09:59:33 Pridružen od:
23. maj 2007
6916 objav
6886 187 55
#3

Dodaš <a name="ime"..>heading1</a> in linkaš link nan <a href="#ime">gumb</a>


všeč(1) ni všeč(0) spam(0)
 
wssrpnc 18. jul 2013 10:05:35 Pridružen od:
22. feb 2011
1022 objav
762 169 20
#4

hvala, kako pa bi še dodal malo animacije z javasrciptom oz. jquery.. tam je problem..


všeč(0) ni všeč(0) spam(0)
 
JanKo 18. jul 2013 10:17:49 Pridružen od:
29. apr 2013
67 objav
61 0 2
#5

Mogoče ti tole kaj pomaga.



http://lions-mark.com/jquery/scrollTo/


všeč(0) ni všeč(0) spam(0)
 
wssrpnc 18. jul 2013 10:21:29 Pridružen od:
22. feb 2011
1022 objav
762 169 20
#6

to sem tudi že našel, ampak dela samo za naslednji div.. ne vem pa, kako preurediti kodo, da bi delala tudi na način opisan v prvem postu


všeč(0) ni všeč(0) spam(0)
 
gnome 18. jul 2013 10:25:38 Pridružen od:
27. apr 2010
829 objav
412 47 10
#7

wssrpnc:

hvala, kako pa bi še dodal malo animacije z javasrciptom oz. jquery.. tam je problem..




Poglej si še demo za ta primer - http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/.


všeč(0) ni všeč(0) spam(0)
Adobe Commerce/Magento 2 & Laravel + {VueJS/React} razvijalec | Moj #1 resource za Laravel & PHP | Claude Code alternative 10% OFF
 
SlimDeluxe 18. jul 2013 12:41:55 Pridružen od:
29. apr 2010
1223 objav
1022 144 9
#8

wssrpnc:

to sem tudi že našel, ampak dela samo za naslednji div.. ne vem pa, kako preurediti kodo, da bi delala tudi na način opisan v prvem postu




Kako to misliš "dela samo za naslednji div"? S tem pluginom targetiraš kar želiš.


všeč(0) ni všeč(0) spam(0)
Freelance Web Developer
 
wssrpnc 18. jul 2013 12:42:29 Pridružen od:
22. feb 2011
1022 objav
762 169 20
#9

Lahko pogledaš ta fiddle prosim pa ga popraviš..



http://jsfiddle.net/WxJLx/4/


všeč(0) ni všeč(0) spam(0)
 
ajudez 18. jul 2013 12:51:23 Pridružen od:
1. okt 2012
68 objav
81 5 0
#10

Tale fiddle dela čisto pravilno, samo ker je prej konec vsebine ti ne vrže posameznih naslovov do vrha. Sem ti za primer zadnji odstavek še malo nafilal z lorem ipsum in sedaj ti naslovi skočijo po kliku na vrh strani.



edit. še link do fiddla z razširjenim zadnjim odstavkom http://jsfiddle.net/WxJLx/8/


všeč(1) ni všeč(0) spam(0)
 
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se