3

I want to direct my readers to a particular place in a third-party HTML webpage. The paragraph of interest looks like this:

<div>
<h1>qwerty</h1>
<p>blah blah</p>
</div>

Like you can see, none of the elements have ids (so this http://webpage/#id wouldn't work). However, the word within the <h1> tag is unique and cannot be found anywhere else in the document. Is there a way to provide a link that will take users directly to that spot on the webpage?

raul
  • 1,119
  • 6
  • 18
  • 35
  • 2
    Sure, what have you tried? – j08691 Jun 29 '16 at 20:35
  • You wan't to focus on `

    qwerty

    ` when URL is `http://webpage/#qwerty`?     – Mohammad Jun 29 '16 at 20:36
  • There should only be one `h1` element on your webpage -- it's not required, but [search engines will expect it.](https://moz.com/community/q/how-will-it-effect-seo-to-have-multiple-h1-tags-on-a-page) – Blazemonger Jun 29 '16 at 20:43
  • [Similar question](http://stackoverflow.com/questions/23362356/highlight-given-strings-on-a-static-html-page-with-javascript) – Blazemonger Jun 29 '16 at 20:46
  • Does this answer your question? [Is there any way to bookmark or link to a section of a page without an anchor?](https://stackoverflow.com/questions/7983290/is-there-any-way-to-bookmark-or-link-to-a-section-of-a-page-without-an-anchor) – toraritte Aug 08 '20 at 16:16
  • A duplicate of [Is there any way to bookmark or link to a section of a page without an anchor?](https://stackoverflow.com/questions/7983290/is-there-any-way-to-bookmark-or-link-to-a-section-of-a-page-without-an-anchor/61703068#61703068), and the answer in 2020 is **yes** (see [this answer](https://stackoverflow.com/a/61703068/1498178)), via W3C [Text Fragments](https://wicg.github.io/ScrollToTextFragment/#indicating-the-text-match). – toraritte Aug 08 '20 at 16:19

2 Answers2

0

You can't link to just some text in the page, so it's not possible if you don't control the site.

The closest thing you can do that I'm aware of is use citebite, which creates a new page with an id inserted so it can take you to that section. However, it's pretty hit or miss in my experience.

dlsso
  • 6,177
  • 1
  • 17
  • 30
0

Better way to do this work is using id attribute in element.

But you can use jquery :contains selector to find element that contain hash. Then get top position of element and scroll window to it position.

window.location.hash = "id";

var hash = window.location.hash.replace("#", "");
var scrollTop = $("h1:contains(" + hash + ")").offset().top;

window.scrollTo(0, scrollTop);
div {
    height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<h1>id</h1>
<div></div>
<h1>id2</h1>
<div></div>
Mohammad
  • 20,339
  • 15
  • 51
  • 79