Scrolllinks

Status
Niet open voor verdere reacties.
GambiaUser

GambiaUser

Gebruiker
Lid geworden
18 jul 2009
Berichten
730
Klik hier voor de URL!

Mijn vraag is. Ik heb op de site 11 kopjes staan.:
1.Tour Operator
2. Leuke steden uitstapjes
3. Strand
4. Souvenirs
5. Musea
6. Scholen
7. Markt
8. Krokodillenpoel
9. Janjanbureh
10. Bevolking
11. Apen
12. Vervoer
13. Weetjes voor als je er bent

Maar er bestaat toch ook zoiets als dat je op Nr. 1 drukt dat hij je dan daar brengt. Want al die 13 dingen staan op 1 pagina. Dat het je dan in 1 keer daar heen scrollt? Kan dat?

Alvast bedankt!:thumb:
 
Nou.. nee, kijk:
Hier is een link
Blablabla
























Hier staat wat je nodig bent, en als je dan op dat linkje klikt dan ben je hier direct. Dat bedoel ik!
 
Kweetniet, maar xie niks. :(

Blinde oplossing:
Geef in de tekst elk kopje een ID mee, bv.:
HTML: 
<h3 id="operator"> Tour Operator </h3>
<p>Dit wordt meestal gedaan door vakantiegangers die ... enz.
Maak van de menu-items links met bladwijzer-verwijzing naar deze id's, bv.:
HTML: 
<h4>1. Tour Operator</h4>
wordt:
<h4>1. <a href="#operator">Tour Operator</a></h4>
 
Nou, nog één keertje dan. ;)
In het paragraafjes-overzicht bovenaan (dat ik maar even het "menu" had genoemd) zet je bij elk nummer een link. Alleen: geen gewone link, maar een link naar een bepaald punt op de pagina.
Dat punt op de pagina moet je dan eerst een merktekentje geven, want anders weet de klik-op-de-link niet waar ie naar toe moet scrollen. Dat merktekentje is de ID (van IDentificatie) die je aan de kopjes gaat toevoegen. Want de kopjes moeten tegen de bovenrand aan zitten als hij automatisch naar beneden gaat scrollen.
Dus je geeft eerst je kopjes een verzonnen ID-naam. En bovenin het rijtje maak je de scroll-verwijzing door als doel van de link (d.w.z. de href="") op te geven dat ie op dezelfde bladzij moet blijven (dat is het hekje #) en naar welk merkteken ie moet (dat is dus de verzonnen ID-naam waar je 'm naar toe wilt hebben.
In totaal ziet de link er dus uit als <a href="#merkteken"> ... </a>
Van de volgende regel bovenaan maak je weer een link, maar nu naar het volgende merkteken. Enz., tot klaar!

Voor de te verzinnen ID-naam kan je alles gebruiken, je kan dus ook bladwijzers maken met de namen Jan, Piet en Klaas. Of: Scrollpunt-1, Scrollpunt-2, enz. Als de links die ernaartoe wijzen, maar dezelfde naam krijgen.
In de praktijk vind ik het 't makkelijkste om de bladwijzers de (afgekorte) naam te geven van het kopje waar ze bij staan.

Of, op een andere manier uitgelegd: zie hier.
Daar gebruiken ze name="merkje", maar id="merkje" werkt ook en is intussen beter.

CSS-hunter
 
Weet ik, niet helemaal toevallig, o Rupsje Nooitgenoeg. ;)
Dit moet weer zo'n bladwijzer worden. Het punt waar je naar toe wilt laten scrollen is het allereerste begin van de pagina. Zet daar het top-ID!
HTML: 
<html id="top">
Dan heb je ergens onderaan het zinnetje "Terug naar begin". Daar maak je weer een interne link van:
HTML: 
<p><a href="#top">Terug naar begin van deze pagina</a></p>
En als je het helemaal mooi wilt doen, zet je in plaats daarvan dit onderaan in de body:
HTML: 
<script type="text/javascript">
     document.write('<p><a href="javascript:window.scrollTo(0,0);">Naar begin van deze pagina<\/a><\p>')
</script>
<noscript>
     <p><a href="#top">Naar begin van deze pagina</a></p>
</noscript>
Dat betekent: als "javascript" aan staat op de pc van de bezoeker, dan scrollt de pagina naar boven met javascript. Als het uit staat, scrollt ie naar boven door de bladwijzer. Het subtiele verschil: zonder gebruik van javascript komt er in de adresregel van de browser te staan:
Code: 
http://www.xs4all.nl/~hfkoster/Alstoerist.html[B]#top[/B]
Met javascript blijft het gewoon schoon:
Code: 
http://www.xs4all.nl/~hfkoster/Alstoerist.html
dus zonder het #top erachter, terwijl de pagina toch weer helemaal bovenaan begint.

CSS-Hunter

  • PS-1:
    Je kunt dit met dezelfde code op méér plaatsen in de pagina zetten, bv. zodat je na elk paragraafje weer terug naar boven kunt om het pagina-overzicht te zien.
  • PS-2:
    Gevorderden kunnen van het javascript een functie maken, die in de <head> van de pagina staat (of, nog beter, in een apart js-bestand), en dan in de body die functie aanroepen; dan blijft de html wat zuiverder. Maar het hoeft niet persé.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan