13Links

Linking to a point within the current web page uses a slow scrolling technique that makes the browser visibly scroll to the specified point in a given time period (rather than jumping instantly to it). I’ve discussed slow scrolling in previous section and promised to explain it when we start the JavaScript bits of the web site, and I’m going to say same again here (patience is a virtue — apparently). I explain all the slow scrolling stuff in section 17.

For now, the link won’t do anything (it won’t do the slow scrolling until we add the JavaScript), but it will be correct in all respects and when the JavaScript is added, it will automatically use slow scrolling without any further changes to either the HTML or the CSS.

Links to a point on the same page are more subtle than links to another page or to an external site; they use exactly the same font as the body text (the other links use a small caps font). The link looks like this: Table 13.1

If the mouse is hovered over the link, it looks like this: Table 13.1

This time the HTML is:

<p class="hyp">Internal links to a point on the same page use the class <span class="code">xref</span>; this is less noticeable on the page: 
<a class="xref js--sc-t13-01" href="#">Table 13.1</a>.</p>

Again, all the important stuff is inside the anchor element, I’ll come back to the class that starts js--sc, the rest of it does look a bit odd:

<a class="xref js--sc-t13-01" href="#">Table 13.1</a>

Ok, there is a class called xref (cross reference is what I meant when I named it) and this is virtually identical to the hlink class we looked at in § 13.1:

.xref:link,                 /* TEXT STYLE - cross reference hyperlink */
.xref:visited{
    background-color: #f8f8f8;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s;
}
.xref:hover,
.xref:active { border-bottom: 1px solid #404030; }

In fact it is identical except it does not use a small caps font. This means it has the same light grey background and transitions to a darker bottom borer when a mouse hovers over it (just like hlink links).

Now let’s look at the rest of the HTML; the oddest bit is the href attribute, it just has a # in it. In this context the # just refers to a null value — essentially it is just a placeholder, it’s needed to make the HTML correct (using # in a HTML link is a way of satisfying HTML validation, it will accept the link as being correct even though there is no address or file name in the link).

To make the link work with slow scroll, we need that funny class from above:

js--sc-f99-01

All sections, figures, tables, code fragments &c. get an ID that allows it to be referenced within the web pages. The following are examples of each type:

The ID given to the section, table, figure &c. has the ID js-- followed by the ID format given in the above table (the XX, YY and ZZ depending on the exact section within which the ID occurs).

This is done in the HTML by giving an ID to the start of the object, e.g.:

<div class="fig-col fig1-1" id="js--f99-01">

Here the object has been given the ID js--f99-01.

To make the soft scroll work, the anchor element must be given a class (not an ID) that matches the given ID. This class has the same name as the ID except that the js-- of the ID is replaced with js--sc-, i.e. there is an extra sc- after the --.

This works because the JavaScript (when we get to it) looks for a class called js--sc-[ID] and then uses this to trigger a slow scroll the point on the page that has a formal ID of js--[ID] (where [ID] is the id format given in Table 13.1).

To use a slow scroll link to a particular point on the current page, simply copy the HTML text above, the format is:

<a class="xref js--sc-[ID]" href="#">VISIBLE TEXT</a>

where [ID] is the id format given in Table 13.1 and visible text is the visible, clickable text that shows up on the web page.

I tend to use slow scrolling on this website, I like it. However, it is not universally popular, and many people feel it is an unnecessary affectation.

If you don’t want to use slow scrolling (clicking the link will jump instantly to the associated point on the page), the HTML is simplified to (in this case):

<a class="xref" href="#js--f99-01">Figure 99.1</a>

I.e. remove any js--sc... class (just leaving the xref) and make the href link the ID of the point to which you want to jump.

To use a direct link to a particular point on the current page, simply copy the HTML text above, the format is:

<a class="xref" href="#js--[ID]">VISIBLE TEXT</a>

where [ID] is the id format given in Table 13.1 and visible text is the visible, clickable text that shows up on the web page.

That’s it.