"hoppa" ner till specifik information på sidan?

Avdelningen för webbrelaterad programmering och grafisk design.
Skriv svar
Användarvisningsbild
Lyngan
Inlägg: 580
Blev medlem: 2002-10-14 9:32:14
Ort: Småland / Sverige
Kontakt:

"hoppa" ner till specifik information på sidan?

Inlägg av Lyngan » 2011-12-21 13:56:51

Hej,

Jag ska göra en enkel sida med all information på en sida. Längst upp ska jag ha en meny med knappar.
Detta är för att min målgrupp förväntar att ha allt enkelt.

När jag trycker på en av knapparna så ska jag "hoppa" ner till en specifik del av innehållet på sidan.
Ska finnas en knapp under varje innehåll där det ska stå något i stilen med "tillbaka till toppen"

Hur gör jag?

Tack på förhand.
Gamestation: 4400+, 936GB, 2024mb, 256mb
Workstation: 2,8ghz, 80gb, 512mb, 64mb
Server: IBM Netfinity 5500

Användarvisningsbild
Peter Wall
Hedersbit
Inlägg: 7026
Blev medlem: 2002-03-08 0:52:56
Ort: Stockholm
Kontakt:

Re: "hoppa" ner till specifik information på sidan?

Inlägg av Peter Wall » 2011-12-22 14:55:23

Enklast är väl att använda sig av a href target name.. kolla på http://w3schools.com/html/html_links.asp
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"

Användarvisningsbild
Lyngan
Inlägg: 580
Blev medlem: 2002-10-14 9:32:14
Ort: Småland / Sverige
Kontakt:

Re: "hoppa" ner till specifik information på sidan?

Inlägg av Lyngan » 2011-12-26 11:16:09

Peter Wall skrev:Enklast är väl att använda sig av a href target name.. kolla på http://w3schools.com/html/html_links.asp
Hur menar du? Den länken syftar på att länka vidare till ett annat dokument. Det är inte det jag syftar på.
Gamestation: 4400+, 936GB, 2024mb, 256mb
Workstation: 2,8ghz, 80gb, 512mb, 64mb
Server: IBM Netfinity 5500

Användarvisningsbild
Peter Wall
Hedersbit
Inlägg: 7026
Blev medlem: 2002-03-08 0:52:56
Ort: Stockholm
Kontakt:

Re: "hoppa" ner till specifik information på sidan?

Inlägg av Peter Wall » 2011-12-27 8:50:24

HTML Links - The name Attribute
The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example
A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a> Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

--------------------------------------------------------------------------------
Diplomerad webbutvecklare
Microsoft Certified Professional Windows 2003
Microsoft Certified Technology Specialist Windows Vista
"Did you know kidneys and applesauce are a delicacy in Sweden? I'm gonna get my applesauce back!"

Användarvisningsbild
madr
Inlägg: 998
Blev medlem: 2004-08-24 11:12:39
Kontakt:

Re: "hoppa" ner till specifik information på sidan?

Inlägg av madr » 2012-01-02 22:40:24

Faktum är att det finns ett ännu enklare sätt: användning av ID-attribut.

exempel:

Kod: Markera allt

... <a href="#contact">Kontakta oss</a> ...

...

<h2 id="contact">Kontakta oss</h2>
<p>bla bla bla</p>
Alltså: sätt ett ID-attribut på ett omslutande element, t ex en DIV, eller på en lämplig rubrik (som i mitt exempel ovan). Länka sedan till brädgård + värdet i ID-attributet (i mitt exempel: "#contact").
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7

Skriv svar