Shiny如何点击actionButton实现同一页面内跳转到指定表格区域

有两种轻量的实现方式，无需额外复杂配置：

方案1：前端直接绑定点击事件（无需额外依赖） #

直接给actionButton添加onclick参数，绑定原生JavaScript滚动逻辑即可，无需引入额外包：

library(shiny)
library(shinydashboard)
library(ggplot2)

ui <- fluidPage(
    fluidRow(box(
        # 直接在按钮上绑定点击跳转的JS逻辑
        actionButton("btn1", "Go to Next Table", 
                     onclick = "document.getElementById('tbl2').scrollIntoView({behavior: 'smooth'})"),
        tableOutput("tbl1")
    )),
    fluidRow(box(
        tableOutput("tbl2")
    ))
)

server <- function(input, output, session) {
  output$tbl1 <- renderTable(mtcars)
  output$tbl2 <- renderTable(mpg)
}

shinyApp(ui, server)

方案2：服务端监听触发（适合需要和服务端逻辑联动的场景） #

如果跳转需要结合其他服务端运算逻辑，可以配合shinyjs在服务端触发滚动：

library(shiny)
library(shinydashboard)
library(ggplot2)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    fluidRow(box(
        actionButton("btn1", "Go to Next Table"),
        tableOutput("tbl1")
    )),
    fluidRow(box(
        tableOutput("tbl2")
    ))
)

server <- function(input, output, session) {
  output$tbl1 <- renderTable(mtcars)
  output$tbl2 <- renderTable(mpg)
  
  observeEvent(input$btn1, {
    # 可在此处添加其他需要执行的服务端逻辑
    runjs("document.getElementById('tbl2').scrollIntoView({behavior: 'smooth'})")
  })
}

shinyApp(ui, server)

说明 #

• scrollIntoView是原生JavaScript内置的滚动方法，添加{behavior: 'smooth'}参数可实现平滑滚动效果，删除该参数则会直接跳转到目标位置
• 如需跳转到其他元素，只需将getElementById中的id替换为对应元素的id即可通用

内容的提问来源于stack exchange，提问作者user3007712