Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Content Layer
namePage Info
id278129461
classwatermark-layer
Content Column
namePage Body
width100.00001%
id278129463
Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

How add anchors on pages across your siteAdding links to specific page areas.

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex

Linking to an anchor takes a user directly to a specific place on a page. 

Adding an anchor is a two-step process: creating the anchor (using the with the Confluence Anchor Macro) and , and linking to it, from the same or a different page.

http://examplesite.com/display/DOCS/My+page#Mypage-bottom

http://examplesite.com/display/DOCS/My+page#Mypage-importantinformation

  • field
    • This setting allows you to insert link text that differs from the linked page title
  • Select Insert

 

Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered manual-steps-flex tight-bottom

Insert the Anchor Macro at a chosen link destination.

Enter a name for the anchor. (e.g. step-two)

Create

Adding an Anchor

  • Go to "Insert Macro" 
  • Select "Anchor Macro" 
  • Enter anchor name (For example, 'top' or 'specific section)
  • Select "Insert"
Creating

a Link to the Anchor

Link to an anchor on same Confluence site:

.

  • Insert a link
  • Click Advanced in the Insert Link window
  • Add # followed by the anchor name from Step 1 into the link field
  • Go to "Insert Link"
  • Choose "Advanced"
  • Type "#" followed by anchor name in "Link" field 

Depending on whether you are

adding

linking to an anchor onthe same page

,

a different page in the same space

,

or a page in a different spaceyou'll want to choose the related syntax:

Anchor locationLink syntax for anchorExamples
Same page#anchor name

#top

#specific section

Page in same spacepage name#anchor name

My page#top

My page#specific section

Page in a different spacespacekey:page name#anchor name

DOC:My page#top

DOC:My page#specific section

  • Enter or modify the Link Text
  • Select "Insert"

Link to an anchor from another web page or another Confluence site:

  • Go to "Insert Link"
  • Choose "Web Link" and add a full URL 

Link syntax

Examples

http://examplesite.com/display/spacekey/pagename#pagename-anchorname

Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex tight-bottom
Note

Naming Anchors

Anchor names are:

  • are case sensitive
  • must match the link you use when creating the Anchor macro


Special Characters

If the name of the page you are linking to contains special characters where the URL displays a page ID rather than a name, the link to an anchor will be a combination of the page ID and the page name, as follows:

For the page "Test - page 1!" containing a tab named "anchor" the URL will look like this: 

 


UTF-16 Characters

If the page name contains UTF-16 characters (eg. Simplified Mandarin, Katakana) then it is necessary to add "id-" into the URL before the second instance of the page name, as follows:

For the page "ページ" containing a tab named "High Level Comparison", the URL will look like this:

Note: You can retrieve the page ID from the address bar when the characters are not ASCII.

Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flex tight-bottom
Tip
  • Looking for the insert macro keyboard shortcut?
    • {

Learn More from Atlassian

  • HTML Link
    new-windowtrue
    textAnchors
    urlhttps://confluence.atlassian.com/doc/anchors-139442.html
  • HTML Link
    new-windowtrue
    textInsert Links and Anchors
    urlhttps://confluence.atlassian.com/confcloud/insert-links-and-anchors-724764900.html
Content Block
nameWarning
rich-link-hoverstrue
id894530759
classmanual-warning-flex
collapsiblecollapse
Warning

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Block
nameInfo
rich-link-hoverstrue
id894537203
classmanual-info-flex
collapsiblecollapse
Info

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Layer
background-color$lightGrayColor
nameRelated
id888168050
Content Column
nameRelated
width100%
id888168051
Content Block
rich-links-hide-descriptiontrue
rich-link-hoverstrue
rich-links-columns4
rich-links-verticaltrue
rich-links-image-height100px
rich-links-hide-site-icontrue
rich-links-details-padding10px
nameRelated
rich-links-enabletrue
border-width0
rich-links-details-alignmentleft
rich-links-margin20px 30px 0 0
id496234544
classrelated-block clean manual-related-flex