Linking to a specific part of a web page

Question

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

User · Answer

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

User · Answer

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    lt a href  javascript void window open    target html   onload function   this document querySelector  p nth-child 10    scrollIntoView      gt see tenth paragraph on another page lt  a gt   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

User · Answer

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    gt  http   url to site index html target   You would put   gt  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   gt  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

User · Answer

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

User · Answer

Just append a   followed by the ID of the  lt a gt  tag  or other HTML tag  like a  lt section gt   that you re trying to get to   For example  if you are trying to link to the header in this HTML    lt p gt This is some content  lt  p gt   lt h2 gt  lt a id  target  gt Some Header lt  a gt  lt  h2 gt   lt p gt This is some more content  lt  p gt    You could use the link  lt a href  http   url to site index html target  gt Link lt  a gt

User · Answer

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   lt a href  page html anchor  gt text lt  a gt

[hyperlink] Linking to a specific part of a web page

Examples related to hyperlink