如何点击按钮跳转到Panel内指定div？（仅用Shiny实现）

可以通过锚点+JavaScript的方式实现，仅使用Shiny包就能完成。核心思路是给Panel 2中每个颜色区块设置唯一ID，然后在按钮点击时，先切换到Panel 2标签页，再通过JS代码滚动到对应ID的元素位置。

修改后的完整代码示例 #

library(shiny)

ui <- fluidPage(
  tabsetPanel(
    id = "main_tabset",
    tabPanel(
      "Panel 1",
      actionButton("btn_yellow", "Yellow"),
      actionButton("btn_blue", "Blue"),
      actionButton("btn_green", "Green")
    ),
    tabPanel(
      "Panel 2",
      # 给每个颜色区块添加唯一ID作为锚点目标
      div(id = "yellow_div", style = "height: 800px; background-color: yellow; margin: 20px 0;"),
      div(id = "blue_div", style = "height: 800px; background-color: blue; margin: 20px 0;"),
      div(id = "green_div", style = "height: 800px; background-color: green; margin: 20px 0;")
    )
  ),
  # 嵌入JS代码处理锚点跳转逻辑
  tags$script(HTML("
    // 监听黄色按钮点击
    document.getElementById('btn_yellow').addEventListener('click', function() {
      // 切换到Panel 2标签页
      Shiny.setInputValue('main_tabset', 'Panel 2');
      // 延迟滚动，确保标签页切换完成后DOM已加载
      setTimeout(function() {
        document.getElementById('yellow_div').scrollIntoView({behavior: 'smooth'});
      }, 100);
    });
    
    // 监听蓝色按钮点击
    document.getElementById('btn_blue').addEventListener('click', function() {
      Shiny.setInputValue('main_tabset', 'Panel 2');
      setTimeout(function() {
        document.getElementById('blue_div').scrollIntoView({behavior: 'smooth'});
      }, 100);
    });
    
    // 监听绿色按钮点击
    document.getElementById('btn_green').addEventListener('click', function() {
      Shiny.setInputValue('main_tabset', 'Panel 2');
      setTimeout(function() {
        document.getElementById('green_div').scrollIntoView({behavior: 'smooth'});
      }, 100);
    });
  "))
)

server <- function(input, output, session) {
  # 若需在服务器端控制标签页切换，可替换为updateTabsetPanel（可选）
  # observeEvent(input$btn_yellow, {
  #   updateTabsetPanel(session, "main_tabset", selected = "Panel 2")
  # })
}

shinyApp(ui, server)

关键说明 #

• 锚点标识设置：给Panel 2内的每个颜色div添加唯一id，这是跳转的核心目标标识。
• 标签页切换+滚动联动：通过原生JS监听按钮点击，先调用Shiny.setInputValue切换标签页，再用scrollIntoView方法滚动到对应元素。添加setTimeout是为了等待标签页切换完成后再执行滚动，避免DOM未加载完成导致跳转失效。
• 平滑滚动可选：scrollIntoView({behavior: 'smooth'})实现平滑滚动效果，若需要直接跳转，去掉该参数即可。

如果更倾向于在服务器端控制逻辑，也可以用以下方式：

server <- function(input, output, session) {
  observeEvent(input$btn_yellow, {
    updateTabsetPanel(session, "main_tabset", selected = "Panel 2")
    # 发送自定义消息触发前端滚动
    session$sendCustomMessage("scroll_to", "yellow_div")
  })
  
  observeEvent(input$btn_blue, {
    updateTabsetPanel(session, "main_tabset", selected = "Panel 2")
    session$sendCustomMessage("scroll_to", "blue_div")
  })
  
  observeEvent(input$btn_green, {
    updateTabsetPanel(session, "main_tabset", selected = "Panel 2")
    session$sendCustomMessage("scroll_to", "green_div")
  })
}

# 同时在ui中添加自定义消息监听的JS代码
tags$script(HTML("
  Shiny.addCustomMessageHandler('scroll_to', function(id) {
    setTimeout(function() {
      document.getElementById(id).scrollIntoView({behavior: 'smooth'});
    }, 100);
  });
"))

这两种方式都仅依赖Shiny原生包，无需额外扩展。

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