Is there any established convention for indicating that a link will scroll the page? (jump links)

Question

There are various existing conventions to give users clues about what will happen on clicking or touching a link when it is not a standard link to another page, for example:

• Single chevrons pointing right or down for "accordion" links that open out a hidden section
• File icons for downloadable files
• "Play" icons for embedded media
• Various icons which indicate that a link goes to an external site when this wouldn't be expected (usually some form of a box with an arrow coming out of it)

Is there any such established convention for indicating that a link points to a section (anchor) on the current page? (aka jump links, section links, scroll links).

I'm sure I've seen downward or upward pointing double chevrons used in this way, but I can't find any reference for this or any information on whether it or any alternative is widespread or performs well in testing.

---

This is for links outside of "On this page" nav blocks where copywriting or structural cues aren't an option (e.g. where you can't simply put jump links inside an "On this page" navigation block or prepend them with "Scroll to ").

Example cases could be, if a jump link needed to be within a paragraph (e.g. on a one-page site or in a long multi-section in-depth article), or in a table where other links in that column go to pages, etc etc.

For example, imagine a long academic article in sections where sentences include jump links like "...unlike the methodology for experiment 2, this has..." or "...as can be seen in figure 3.5, the...".

Answer 1

I have seen "back to top" links being associated with an arrow to one side. Most people will associate the up arrow with the name.

e.g.

There's also the notes and reference links coming from print for more formal or academic documents with * or dagger symbol to indicate a section note, foot notes where there's the implicit association that it'll take you to another part of the same page.

But I don't think I've ever seen any special symbol or styling to suggest whether it's a "same page" link or it'll take you to a different page for items where you've moving further down a page.

I'm taking a guess here, from my personal experience I think we as users have gotten use to the fact that information online might not necessarily be linear. We expect items to be crosslinked that knowing we'll be directed to the information we want is far more important to us as to where precisely the information is found in. Whether it's on the same page or not isn't important so long as the links are persistent such that we can get to what we need. Perhaps this is why we haven't establish conventions on this front.

Answer 2

Links that scroll to a different part of the page violate the mental model we have become accustom to.

The problem is clearly defined here -- http://www.nngroup.com/articles/avoid-within-page-links/

The solution is usually not to do it at all because of how conditioned we are to expect links to go somewhere else and work with the back / forward buttons of the browser.

Here are a few exceptions to the rule:

1. Alphabetized lists
2. Frequently Asked Questions (FAQs)
3. Table of Contents

In any case it is a good idea to let the user know "Clicking links will scroll to a different part of this page" to set expectations up front.

One approach for scrolling links in a research paper could be to make them all numbers...

and then repeat the full list of links again at the bottom of the document as numbered footnotes...

The NY Times keeps anchor links in a list pinned to the left so the user doesn't lose context as the rest of the page scrolls...

Answer 3

The closest thing I can readily think of is how Wiki sites handle this. "Plain" text links are almost always going to take you to another page on that site; "contents" links in a table (?) are usually for jumping around the page you're on; and the sites with the external link icon at the end of the link... well, they are external links.

Links for stuff on the page are usually displayed like this...

External links have this icon...