14
7
Is it possible to create a hyperlink to a specific scroll position on a web page? For example, I'd like to create a link to http://www.stackoverflow.com/, but with the page scrolled down 100 pixels.
Anderson Green
Posted 2012-01-25T02:24:27.517
Reputation: 5 214
3
You can scroll to a given position using the jQuery scrollTo plugin. If you have a look on its demo page, you'll see that the plugin is capable of many different options, including scrolling to a certain position. That would mean you'd have to control the target's JavaScript, though, so this might not be suitable for a link to an external site.
Amos M. Carpenter
Posted 2012-01-25T02:24:27.517
Reputation: 1 373
15
The vanilla way link to somewhere in-page is via an anchor point already present in the page.
This can be created using the <a>…</a> tag. Note that the link specified in "anchor point" (above) has #h-12.2 at the end. This corresponds to <a id="h-12.2">12.2</a> embedded in the HTML forming the page, and when clicked will reposition the page view to this anchor.
Note that prior to HTML5, the name attribute was used in the anchor tag, but is no longer supported and the id attribute should be used in its place (reference). This also means that you can use any element for an anchor tag, you are not limited to the <a> element.
Paul
Posted 2012-01-25T02:24:27.517
Reputation: 52 173
6
Try right-clicking and Inspecting Elements on the page. You'll find the <a> tags, those are the anchor points.
Then take out the < before the first and last a so that they would not show up as the links. You can actually see the effects while writing in the response box when it shows you the preview below.
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
and
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
As you can see, the only difference is at the very end where the anchor names after the pound (#) symbol. the name after the > is for how the link reads to the user.
In this case "question-header" reads as "question" and answers happens to be the same.
Then the following should link to Mike's comment. Since their anchor point is 382094
To clarify, you can simply find the anchor and add the # after your link.
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
these will all take you to different places on the same page.
Georgeq
Posted 2012-01-25T02:24:27.517
Reputation: 61
Does this work only for IDs or does it work for class also? For example, if I had an element, say, <h3 class="theClass">Header</h3>, how can I link to this element which does not have an ID attribute value? – Ulysses Alves – 2015-11-20T16:01:34.180
1
To link to a pixel specific position on a page, place the anchor tag inside a div that is positioned absolutely using "top:x left:y" coordinates.
Graeme
Posted 2012-01-25T02:24:27.517
Reputation: 11
I used this in building a responsive site where the menu was fixed along the top. Normal targets placed the top of the positioned section behind the menu. Using the technique above it was easy to make the top of the required sections line up with the bottom of the menu. – Graeme – 2017-05-31T16:49:47.710
0
You can use Citebite to link to a specific position of a webpage even if it doesn't use id in that position. It is easy to use. Just go to the link I provided here and then paste the chunk of the text you want to show first after going to your webpage in the Quote text field and then provide the link of the webpage in the Source URL text field. Then click to Make Citebite. Then it will generate a link. That link will be your desired link.
Farabi Siddique
Posted 2012-01-25T02:24:27.517
Reputation: 9
1
Welcome to Super User! Please read How to recommend software for minimum required information and suggestions on how to recommend software on Super User. To keep your answer useful even if the provided link(s) breaks these details should be edited into your answer.
– I say Reinstate Monica – 2017-09-15T18:48:41.923@Twisty The provided link IS the software. It's a web app. This seems sufficient. However, Farabi, if you have any affiliation with Citebite you must disclose it. Otherwise, you're good. – Duncan X Simpson – 2017-09-15T20:23:51.003
@DuncanXSimpson Please read the meta post I linked. More than just the name of the software and a link is required to meet site standards. – I say Reinstate Monica – 2017-09-15T20:25:59.210
@Twisty
@Twisty I edited the answer. Is it okay now? – Farabi Siddique – 2017-09-17T07:42:03.783
This site does not support HTTPS for its own domain, and is not working for me with the quote "link to a specific position of a webpage even if it doesn't use id in that position" and the URL of this very question. (It throws "Error: certificate verify failed", and I also wonder what will happen with x-frame-options: SAMEORIGIN.) I also tried with nytimes.com, failing too, and gave up. So, a working example might be nice... – Arjan – 2017-09-17T10:10:30.127
1Link is dead :( – Aryan Firouzian – 2018-09-11T10:02:18.000
I wish there was a way to link to a specific position using pixels in the URL. – akinuri – 2018-01-05T12:02:10.020