How to point to a specific HTML anchor in Shiny

Question

I got a Shiny App which build a big HTML report. I want browsing the report to be easy for the user. Ideally, I want to "point" to a specific anchor based on user input values.

library(shiny)

ui <- fluidPage(
  htmlOutput("formattedText")
)

server <- function(input, output) {

  output$formattedText <- renderText({
    "<hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br><a id='anchorid'></a>Point to this anchor<br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })

}

shinyApp(ui, server)

This code displays the top of the HTML report. How to display the HTML report at the anchor: id = anchorid?

Answer 1

You need to place a corresponding link in your HTML code.

Currently your ShinyApp output produces:

<hr><br><a id='anchorid'></a>Point to this anchor<br>

That won't work because you positioned the link at the point where you want the link to take your site visitors. So, change that line to:

<hr><br><span id="anchorid">Point to this anchor</span><br>

That turns this specific point into your "bookmark". In order to make it work, you need a link for your site visitor to click on. If the link is in the same HTML document, use:

<a href="#anchorid">Go to this anchor</a>

If the link is on a different page, use:

<a href="thispage.html#anchorid">Go to this anchor</a>

The W3C specifications go into more detail.

Answer 2

To further illustrate @elbrant's answer, I've put that together in a ShinyApp, with Links to 3 anchors and back to the Top.

library(shiny)

ui <- fluidPage(
  htmlOutput("links"),
  htmlOutput("formattedText")
)

server <- function(input, output) {
  output$links <- renderText({
    "<hr><br><span id='top' style='color: red;'>
      <a href='#anchorid0'>Go to anchor0</a><br>
      <a href='#anchorid1'>Go to anchor1</a><br>
      <a href='#anchorid2'>Go to anchor2</a><br>
    </span><br>
    "
  })

  output$formattedText <- renderText({
    "<hr><br><span id='anchorid0' style='color: red;'>Anchor0</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid1' style='color: red;'>Anchor1</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid2' style='color: red;'>Anchor2</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })
}

shinyApp(ui, server)