2

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

NullUserException
  • 83,810
  • 28
  • 209
  • 234
Moon
  • 19,518
  • 56
  • 138
  • 200
  • 2
    You're missing the end tag for your named anchors, and the technique is frowned upon in favour of "Giving an id to any element". – Quentin Aug 24 '10 at 13:08
  • @David " technique is frowned upon..." But it works on all browsers – NullUserException Aug 24 '10 at 16:32
  • 2
    For HTML 4 pages there is no need of an end tag and name is absolutely fine. In general I would also recommend to always use an id attribute. – 2ndkauboy Aug 24 '10 at 16:35
  • no no... if user is directed from another page to this how to scroll down to a specific bookmark\anchor\desired location... didn't you guys read my example.... gash – Moon Aug 24 '10 at 16:37
  • Do you want scrolling effect or jumps directly to the named anchor? – Holystream Aug 24 '10 at 16:46
  • @NullUserException — "working in all browsers" is not the same as best practice. – Quentin Aug 24 '10 at 16:46
  • 1
    @Moon Before you start complaining about other people's answers, fix your own question. The broken English is not really helping. – NullUserException Aug 24 '10 at 16:47
  • 1
    @Kau-Boy — The end tag for the `` element is **never** optional. Most browsers tend to perform **error recovery** if you omit it, but that doesn't mean you should do so. – Quentin Aug 24 '10 at 16:47
  • @David I would never favor "best practice" over cross-browser compatibility. By the way the "frowned upon" technique is used by this very site. – NullUserException Aug 24 '10 at 16:49
  • @Moon — Why don't you want to do this the way stackoverflow does it? You said that it has the effect you want, so what is wrong with the technique? – Quentin Aug 24 '10 at 16:49
  • @NullUserException — You imply that the best practice I recommend does not have cross browser compatibility. That isn't correct, it does (with the added benefit that you can link to any element (and style it with `:target`), rather then only to a specific type of inline element). – Quentin Aug 24 '10 at 16:51
  • stackoverflows data & links & pages are dynamically generated... its going to complex if somebody started explain how stackoveflow does it cuz i mentioned its example... so to learn wouldn't it be better to aim for static data – Moon Aug 24 '10 at 16:52
  • 1
    @NullUserException — This site does many things that are not best practice, its source code is a long way from being a shining example of how to build a website. – Quentin Aug 24 '10 at 16:53
  • @Moon — The client side parts of it are identical. It doesn't matter how they determine the target names, and how they generate the elements, it is still a simple case of sticking #foo on the end of a URI and then having an element with `id='foo'` (or an `` element with `name='foo'` if you are doing it the pre-HTML 4 way) – Quentin Aug 24 '10 at 16:54
  • 1
    @David "[SO's] source code is a long way from being a shining example of how to build a website." Google isn't either. Point is, "best practices" are second nature to user-experience, which is what drives people to use your website. What's the point of having a website that's XHTML valid, CSS valid, WAVE verified, etc. but nobody uses? – NullUserException Aug 24 '10 at 17:12
  • @NullUserException — Best practices are **still** not something you have **instead** of a good user experience. If it was a case of "Using ided elements instead of named anchors will stop the links from working for some users" then it **wouldn't be a best practice**. Using named anchors doesn't even save development time, if anything named anchors require a little bit of **extra** typing! – Quentin Aug 24 '10 at 17:14
  • @David "Using ided elements instead of named anchors will stop the links from working for some users" That is exactly the case here. They won't work in some older browsers. – NullUserException Aug 24 '10 at 17:28
  • 1
    @NullUserException — If you thought that I was wrong when I claimed ids had cross browser compatibility, then you should have said that instead of repeating vague things about user experience. That said, the most modern browser which doesn't support it is, as far as I know, Netscape 4.x. There are very few sites that will work in that browser since its CSS engine is so bad. Are you counting Netscape 4 users? Or did you have some more significant browser in mind? – Quentin Aug 24 '10 at 17:31

4 Answers4

6

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 :)

2ndkauboy
  • 9,302
  • 3
  • 31
  • 65
0

you need

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

note the hash

second
  • 28,029
  • 7
  • 75
  • 76
0

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

brad
  • 31,987
  • 28
  • 102
  • 155
  • i said i don't want how stackoverflow does it... i think nobody read the question and just considered it to be a simple thing asked and hurried to answer – Moon Aug 24 '10 at 16:39
  • that's all fine and well but explaining what stack does IS answering your question at the same time. It's a named anchor, case closed, no need for downvotes. – brad Aug 24 '10 at 17:30
0

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.

Tim Meers
  • 928
  • 1
  • 14
  • 24