38

Is there any way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the html code ?

I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.

Note : the destination page has an anchor tag as "foo" then bookmark like http:/...hello.html#foo will not only take the user to hello.html but also automatically scroll down to the section of the page so that the anchore tag "foo" is at the top of the screen

Neil
  • 5,331
  • 13
  • 52
  • 77
  • If you would load the page in a new window. You could open it using javascript and with its reference scroll down, but you if the page changes so could the scroll count. – NitWit Nov 02 '11 at 15:54
  • Thanks.Can it be done if it opens in a new tab (its ok for me even with javascript but it should not be a pop up window ).Page is quite static , will not change. Do you mean I can set a number as the length of the page to be scrolled down? I will appreciate any example . – Neil Nov 02 '11 at 15:58
  • After reviewing my original thought, if the Link is on another domain window.scrollTo will not be allowed XSS – NitWit Nov 02 '11 at 16:04
  • http://stackoverflow.com/questions/6049923/in-javascript-how-can-i-open-a-page-in-a-new-browser-window-and-scroll-to-a-spe – NitWit Nov 02 '11 at 16:06

8 Answers8

19

You only need to have the appropriate id attribute on an element to use it like a bookmark...

<a href="#test">Test</a>

...

<p id="test">Hello world</p>

See the W3C specification: Anchors with the id attribute

Older specifications also allowed navigation based on the name attribute, but this attribute has been removed from the latest HTML specifications (but if there is a name attribute it may be used in the same way as an id attribute).

If there is no id or name attribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.

Fenton
  • 206,497
  • 63
  • 356
  • 369
  • Should this work in any modern browser? I saw (http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id/484892#484892) it's not supported in NS4 (well, who cares) but how about IE6? – Aaron Digulla Nov 02 '11 at 16:40
  • It works in IE6. (but you should not support anything that you are not able to test) – Lee Kowalkowski Nov 03 '11 at 08:53
  • 4
    Are there any tricks which can link to an element that doesn't have an ID? – Rich Jan 27 '14 at 12:44
  • @Rich - many browsers also support the old `name` attribute with this too - but really you should use `id` as this is the only one the specification supports. – Fenton Jan 27 '14 at 15:00
  • 2
    I'd like to link to a section in a page which isn't under my control and which has neither "id"s nor "name"s. See e.g. the various sections at http://www.codinghorror.com/blog/2012/07/new-programming-jargon.html I can't think of how to make that work... – Rich Jan 27 '14 at 15:10
  • @Rich - you can't in this case, you would have to link to the page and the user would have to scroll to find what they need. – Fenton Jan 27 '14 at 15:14
  • 1
    I agree. Please could you add something about that to your answer? The q explicitly calls out "I am not author", but the best answer (yours) doesn't address what to do if there are neither "name" nor "id" attributes. – Rich Jan 28 '14 at 12:45
  • @Rich - I have added those details. – Fenton Jan 28 '14 at 14:53
  • Likewise, id attributes are automatically DOM accessible. You don't have to set it to a variable like `var nameElement = document.getElementById('name');`. You can just use `name` as that variable right from the start. And since you point CSS to ids with `#`, it all starts to make sense. – 1934286 Aug 21 '20 at 22:19
18

It's the year 2020, there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash

#:~:text=<Text To Link to>

Working example on Chrome Version 81.0.4044.138:

Click on this link Should reload the page and highlight the link's text

Abderrahmane TAHRI JOUTI
  • 2,120
  • 20
  • 37
  • Unfortunately, it works more like an anchor rather than a highlighted search. It only finds and highlights the first instance. For example, [try with the word page](https://stackoverflow.com/q/7983290/614277#:~:text=page), which has multiple instances here. So I could be a real munchkin right now and put the text "Click on this link" as a comment on the question and then break your example. – 1934286 Aug 21 '20 at 22:22
  • 1
    Also appears to be Chrome only at the moment. – 1934286 Aug 21 '20 at 22:30
  • Note that for this to work in a link you **must** include a `rel="noopener"` attribute in your `` element, due to security restrictions. – Fernando Echeverria Nov 26 '20 at 04:05
  • 1
    @toraritte Thanks for the edits that you've added, but I thought the simple answer was easier to follow and showed a working example that I'd like to keep. I am trying to pick up your edits and add them as a more detailed and scientific `Read More`. You could also post it as its own answer and I could link to it :-) – Abderrahmane TAHRI JOUTI Apr 04 '21 at 19:32
  • @AbderrahmaneTAHRIJOUTI Got it, and thanks for the heads up! I'm going to post it as an answer, but would you comment on it when you add the **Read more** more section to yours? I didn't want to post an redundant answer, but I found these tidbits, and this thread seems to be the best place to save them - so one's your answer has them too, mine will be superfluous, and will delete it. Thanks again! – toraritte Apr 04 '21 at 20:10
2

This is a copy of @AbderrahmaneTAHRIJOUTI's answer but updated with some extra info.

It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the percent-encoded quote to the URL like this:

#:~:text=<percent-encoded-text-quoted-from-site>

For example, this link highlights the syntax from the spec.

One can also highlight multiple sections as well by chaining query parameters with ampersand (&):

#:~:text=<quote-1>&text=<quote-2>

For example, see these highlights to the spec.

Even ranges can be set in case of a longer quote (at least in Chrome):

#:~:text=<begin-text>,<end-text>

For example, highlighting an entire paragraph in the spec.

For some reason, in Chrome 89.0.4389.90 the above links may only work if one (1) clicks on them, (2) goes to the address bar by clicking in it or by F6, and (3) hits Enter. Not sure why this is when Google search constantly offers links like this in the results which work out of the box (e.g., a link to Azure Vault)

Support

It's still spotty, but most major browsers support it (except for Firefox...). To check the current status of adoption, check out https://caniuse.com/?search=%3A~%3A

halfer
  • 18,701
  • 13
  • 79
  • 158
toraritte
  • 4,130
  • 3
  • 26
  • 43
1

If everything else fails, you can use get the query from the window.location, use jQuery to get the DOM element, ask for it's position and scrollTop to move there (see jQuery scroll to element)

Community
  • 1
  • 1
Aaron Digulla
  • 297,790
  • 101
  • 558
  • 777
0

The Firefox extension "Web Marker" does exactly what you want.

https://addons.mozilla.org/en-US/firefox/addon/web-marker/

You can find its source code and documentation here:

http://liveurls.mozdev.org/tech.html

papapasan
  • 33
  • 5
  • 1
    Thanks but the web page says "Not compatible with Firefox Quantum" as of today. and also it says it was "Last updated 6 years ago (Feb 15, 2012)" :( – bgoodr Jan 03 '18 at 17:20
0

There is a relatively recent W3C Working Group Note on Selectors and States which would allow linking to selected text.

Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):

https://addons.mozilla.org/en-US/firefox/addon/precise-links/

As of 2019 it seems to work fine.

Its source code is available here.

aplaice
  • 142
  • 1
  • 5
0

If the page supports being embedded as an iframe, you can link to a document that embedds it and then autoscrolls the document. The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the page taller once we approach the bottom:

data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
CTurt
  • 1
-1

Just in case anyone is still seeking a solution... AnchorMe addon from firefox just solved this for me. Ctrl + double click your desired destination and voila.

Aimee
  • 1