开发者

HTML - Auto navigation with Named Anchors #

开发者 https://www.devze.com 2023-01-13 09:06 出处:网络
well we can have name anchors in our page like the following code <!---Some HTML Code--> <a href=\"#Mark_1\">Mark 1</a>

well we can have name anchors in our page like the following code

<!---Some HTML Code-->
<a href="#Mark_1">Mark 1</a>
<a href="#Mark_2">Mark 2</a>

<!---After some HTML Code-->
<a name="Mark_1">


<!---After some HTML Code-->
<a name="Mark_2">

by doing so we provide links that to scroll up and down a page and all but

I have seen several times on the net that when you click a link and a new page is opened and it contains many subjects but page is scrolled to the desired position.

HOW THAT IS DONE

for example, in stackoverflow's recent activity when we click some activity the relevant page is opened and page is scrolled to 开发者_高级运维that activity out of many... this is just an example.. i don't want how stackoverflow does it... what i want how is this done or is there any name for this technique


You can append a hash with following the the value of the id attribute of any HTML element. See this example: http://en.wikipedia.org/wiki/Html#Attributes

It links directly to the section about "Attributes". In this section it also discribes the technique :)


you need

<a href="#Mark_1">Mark 1</a>

note the hash


It's doing exactly what you're talking about, a named anchor. So the link looks something like this:

<a href="http://stackoverflow.com/questions/3549590/in-depth-ruby-gem-development-resources-book-video-sites/3550910#3550910"></a>

Notice the '#' in the href (... 3550910#3550910), that's the named part. Takes you right where you want to go.

Btw in your example above your link to the named anchor should be

<a href="#Mark_1">Mark 1</a>

Notice the hash


I think you have it right, but you just need to add the target attribute.

<a href="#Mark_1" target="_blank">Mark 1</a> 

This will open the link in a new page and should position it down the the anchor. I normally use the full URL in the href section though.

0

精彩评论

暂无评论...
验证码 换一张
取 消