关于 javascript:如何在闪亮中以编程方式转到 HTML 锚点?

How to go to an HTML anchor programatically in shiny?

我可以使用 a("Go to Results", href = '#anchor_box') 在 ui 中添加指向锚点的链接,并让用户单击它以转到该锚点。

但是如何以编程方式将窗口"发送到"#anchor_box?例如,当运行时间较长的 observeEvent() 末尾有结果时?


您可以为此使用 javascript。有几种可能性,一种方法是获取元素并使用 scrollIntoView(),请参阅使用 javascript 进行锚点跳转。

shiny 中使用 javascript 的一种简单方法是 library(shinyjs).

您可以插入以下内容来告诉 R 移动焦点元素:

1
2
3
runjs('
      document.getElementById("anchor_box").scrollIntoView();
    '
)

为了知道何时执行此操作,您可以将其package在 observeEvent() 中:

1
observeEvent(eventExpr = input$clck, handlerExpr = {...})

缺点是刷新页面不会自动"向上滚动到顶部"。

可重现的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
library(shiny)
library(shinyjs)

ui <- fluidPage(

  a("Go to Results", href = '#anchor_box'),
  actionButton("clck","Move Programmatically!"),

  plotOutput("plot", height = 1300),  
  div(id ="anchor_box","HERE"),
  useShinyjs(),

)

server <- function(input, output, session) {

  output$plot <- renderPlot({
    plot(1)
  })

  observeEvent(eventExpr = input$clck, handlerExpr = {
    runjs('
      document.getElementById("anchor_box").scrollIntoView();
    '
)
  })

}

shinyApp(ui, server)