Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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.

share|improve this question

4 Answers 4

up vote 2 down vote accepted

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.

share|improve this answer

The only way to link to somewhere in-page is via an anchor point already present in the page.

This created using the <a></a> tag. Note the the link specified in "anchor point" has #h-12.2 at the end. This corresponds to <a name="h-12.2">12.2</a> enbedded in the html forming the page, and when clicked will reposition the page view to this anchor.

share|improve this answer

Similar to Paul's answer, you can also link to the first occurrence of a tag ID in an HTML document. This won't be an exact number of pixels though.

For example, link/scroll to this page's question or answers.

share|improve this answer

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="http://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>

and

a href="http://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.

http://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header

http://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers

http://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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.