如何使用条件面板强制转到 Shiny R tabItem 中的页面顶部？

Question

我正在组装一个 shinyApp，用作心理问卷数量的调查板。

每个选项卡都是另一项研究，应用程序内部有许多条件面板（作为调查的下一页）。要浏览页面，页面末尾还有另一个面板。更改页面后我希望浏览器导航到新页面的顶部（下一个问卷的开头）。

我试图将解决方案基于，但 observeEvent 是对滑块的更改。不幸的是，它不起作用。事实上，它似乎没有做任何事情。

我在下面的代码中创建了一个问题示例：

library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)

##### Shinyjs Code

jscode <- "shinyjs.toTop = function() {document.body.scrollTop = 0;}"

UI <- dashboardPage(skin = "black",

                # Title of app
                dashboardHeader(title = "Minimal working example", titleWidth = 600),
                
                # Tabs setup
                dashboardSidebar(sidebarMenu(menuItem("Info",
                                                      tabName = "info",
                                                      icon = icon("info")),
                                             menuItem("Survey",
                                                      tabName = "survey",
                                                      icon = icon("chart-bar"))
                                             
                )
                ),
                
                # Main body with two tabs
                dashboardBody(
                  
                  tabItems(
                  
                  # Info about
                  
                  tabItem(tabName = "info", tags$title("Info"),
                          fluidPage(
                            box(title = "Hi!", width = 40,
                                "This is the first tab of example"))),
                  
                  # Survey
                  
                  tabItem(tabName = "survey", tags$title("Survey"),
                          
                          #Page first, Shinyjs implementation
                          
                          fluidPage(useShinyjs(),
                                    extendShinyjs(text = jscode,
                                                  functions = "toTop"),
                                    
                            conditionalPanel("input.slider_page == 'page1'",
                                             tags$h1("First page of survey"),
                                             "Now a lot of text", 
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "More text",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "Some more items",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "Some more items",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "And now the slider to choose the page"),
                            
                            # Second page
                            
                            conditionalPanel("input.slider_page == 'page2'",
                                             tags$h2("Second page of the survey"),
                                             "This should be visible after turning the page", 
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "More text",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "Some more items",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "Some more items",
                                             hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                             "And this should not be visible just after turning pages"),
                            
                            #Slider to change a page
                            
                            fluidRow(sliderTextInput("slider_page",
                                                     label = "Choose a page",
                                                     choices = c("page1",
                                                                 "page2"),
                                                     selected = c("page1")))
                          )
                          
                          ))))

server <- function(input, output) {
  
  # observeEvent to execute javascript to go to the top of the page
  
  observeEvent(input$slider_page,{
    
    js$toTop();
    
               })
  
}

shinyApp(UI, server)

Answer 1

好的，我终于明白了。我从中找到了已接受的答案，可以在我的代码中使用。

如果您需要对具有多个页面和滑块的多个选项卡使用相同的功能，您可以研究这个问题的答案：

下面我贴上我修改过的最小再生示例 - 它可能会帮助任何遇到类似问题的人。


##### Shinyjs Code

UI <- dashboardPage(skin = "black",
                    
                    # Title of app
                    dashboardHeader(title = "Minimal working example", titleWidth = 600),
                    
                    # Tabs setup
                    dashboardSidebar(sidebarMenu(menuItem("Info",
                                                          tabName = "info",
                                                          icon = icon("info")),
                                                 menuItem("Survey",
                                                          tabName = "survey",
                                                          icon = icon("chart-bar"))
                                                 
                    )
                    ),
                    
                    # Main body with two tabs
                    dashboardBody(
                      
                      tabItems(
                        
                        # Info about
                        
                        tabItem(tabName = "info", tags$title("Info"),
                                useShinyjs(), # Only this call is needed in UI to initialize ShinyJS
                                fluidPage(
                                  box(title = "Hi!", width = 40,
                                      "This is the first tab of example"))),
                        
                        # Survey
                        
                        tabItem(tabName = "survey", tags$title("Survey"),
                                
                                fluidPage(
                                          
                                          conditionalPanel("input.slider_page == 'page1'",
                                                           tags$h1("First page of survey"),
                                                           "Now a lot of text", 
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "More text",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "Some more items",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "Some more items",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "And now the slider to choose the page"),
                                          
                                          # Second page
                                          
                                          conditionalPanel("input.slider_page == 'page2'",
                                                           tags$h2("Second page of the survey"),
                                                           "This should be visible after turning the page", 
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "More text",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "Some more items",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "Some more items",
                                                           hr(),hr(),hr(),hr(),hr(), hr(),hr(),
                                                           "And this should not be visible just after turning pages"),
                                          
                                          #Slider to change a page
                                          
                                          fluidRow(sliderTextInput("slider_page",
                                                                   label = "Choose a page",
                                                                   choices = c("page1",
                                                                               "page2"),
                                                                   selected = c("page1")))
                                )
                                
                        ))))

server <- function(input, output) {
  
  # observeEvent to execute javascript to go to the top of the page
  
  observe({
    
    # You can add multiple triggers here if there are multiple (n) tabs with changing pages in your app
    
    input$slider_page
 #  input$slider_2_page
 #  ....
 #  input$slider_n_page
    
    # And this JS code works finally :)
    
    shinyjs::runjs("window.scrollTo(0, 0)")
    
  })
  
}

shinyApp(UI, server)

如何使用条件面板强制转到 Shiny R tabItem 中的页面顶部？

How to force going to top of page in ShinyR tabItem with conditional panels?

shinydashboard

shinyjs