Link to Block or Anchor Link

Anchor links allow your site visitors to find useful information quickly within a page without having to scroll up or down. An anchor link may also be created to take a visitor directly to content on another page or straight to a block. This requires creating the basic link that will act as an anchor link.

1

Launch Inspect Element and Locate The Code

Webpages are built with code, and all elements within that page have some code associated with them. It is possible to view the webpage code with a tool that already exists in your browser called Inspect Element. We will be focusing on Inspect Element in Google Chrome because that’s our browser of choice. Firefox has its own developer tools which can also be invoked by selecting inspect element from the browser menu.

  1. To launch the inspect element tool, press CTRL + Shift + I keys on your keyboard.
  2. Or you can right click anywhere on a web page and select Inspect from the browser menu.

Launch Inspect Element

2

Get the Block ID

  1. Take the mouse pointer to the block on the web page that you would like to create a jump link for
  2. Right click and select Inspect. The element you pointed at will be highlighted in the source code. Note the ID code for the block and the page URL.
  3. Or you can right click anywhere on a web page and select Inspect from the browser menu.

Note: The ID usually follows the "div" tag and will be "id=" the block element code. In our example the block ID is "block-bean-content-gridlinks". In our example the page URL is  http://www.colorado.edu/p1e51cd24408/content-grids

Get the block ID

3

Link to a Block

  1. Navigate back to the page where you would like to create your link to the block.
  2. Click the Link icon in the WYSIWYG editor and select URL from the drop-down menu. 
  3. Create the link by inserting the # sign and the block ID. In our example the link is #block-bean-content-gridlinks
4

Link to an Anchor Link on Another Page

If you have created an anchor link on another page you may also create a custom link to to this anchor.

  1. Create your anchor in your content.

    Tip: If the content begins with a heading, place the anchor on the line above the content so the heading does not take on link code and look like a hyperlink to the visitor.

    Correctly place an anchor

  2. Navigate back to the page where you would like to create the link to the anchor. 
  3. Click the Link icon in the WYSIWYG editor and select URL from the drop-down menu. 
  4. Create the link using this convention: url of page the block is on / # anchor name. In our example the link is http://www.colorado.edu/p1e51cd24408/content-grids/#session schedule