106

How do I create a link to a part of long webpage on another website that I don't control?

I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?

APerson
  • 7,304
  • 5
  • 32
  • 48
mjmuk
  • 1,061
  • 2
  • 7
  • 3
  • 1
    Possible duplicate of [How do I link to part of a page? (hash?)](http://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash) – Quentin Nov 02 '16 at 16:37
  • To link this part of answer use following link, https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page – Ruturaj Bisure Dec 26 '17 at 13:25
  • To link this part of page use following link, https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page – Ruturaj Bisure Dec 26 '17 at 13:26

6 Answers6

92

Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

You could use the link <a href="http://url.to.site/index.html#target">Link</a>.

Adirio
  • 4,609
  • 1
  • 12
  • 22
APerson
  • 7,304
  • 5
  • 32
  • 48
34

Create a "jump link" using the following format:

http://www.somesite.com/somepage#anchor

Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.

If the element doesnt have an id and you dont control that site then you cant do it.

cowls
  • 22,178
  • 6
  • 45
  • 76
  • What if the specific part of the webpage does not have an id associated with it? – ajaysinghnegi Dec 27 '18 at 12:55
  • Then you'll need to add the id to the element – cowls Dec 29 '18 at 18:58
  • 1
    Can I add an id to a tag on a web page on the internet? – ajaysinghnegi Dec 30 '18 at 05:27
  • 2
    No, if you want to do this to another website you could try creating a custom JS bookmarklet to scroll to the part you want to scroll to. You can't make the anchored links work if the ids aren't setup. – cowls Dec 30 '18 at 15:25
  • Can you link to something that you specified above for doing that? I haven't done anything of that sort before. – ajaysinghnegi Dec 30 '18 at 16:29
  • jay, its not possible to have a bookmarklet that navigates to a page and scrolls to certain position. Once your bookmarklet changes location, the page is reloaded so your js is lost. But, for your reference, a bookmarklet that scrolls on your current page to 500 pixels from the top would look like this: javascript:scroll({top:500}) – Frazer Kirkman Feb 15 '19 at 01:12
  • I think it is called an [anchor link](https://www.rapidtables.com/web/html/link/html-anchor-link.html) – Chagai Friedlander May 12 '20 at 11:04
10

That is only possible if that site has declared anchors in the page. It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.

And then the syntax would be

<a href="page.html#anchor">text</a>
fredrik
  • 5,858
  • 3
  • 30
  • 39
9

In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

Trivia:

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

Working example of such 'exploit' you can try right now could be:

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)

Notes

  • Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
  • Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
  • MDN: Window.open()
  • (1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
myf
  • 6,206
  • 1
  • 30
  • 37
  • huh it didn't scroll to the bottom and the bottom isn't red – John D Aug 11 '19 at 02:53
  • 1
    …and neither it opened new window, I suppose. Most probably because fact, that execution of `javascript:` links typed into URLbar does not work in most browsers anymore with default settings, as "self-XSS" prevention. But you can try it in the Web Developers console, where it should work well. – myf Aug 13 '19 at 19:33
  • could someone please edit this and make it easier to use? I am not a javascript expert and couldn't figure out what to do – Chagai Friedlander Feb 26 '20 at 15:03
5

The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....

https://github.com/bokand/ScrollToTextFragment

You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.

It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.

bigjosh
  • 923
  • 10
  • 14
3

First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated. But instead of 

> http://url.to.site/index.html#target

You would put

> http://storedomain.com/target

For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink. Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores. If you want to link to something other than your homepage you would put

> http://mystore-classifier.com/pagename/#BlockID

I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!

Ryan Buchanan
  • 31
  • 1