Shiny Dashboard load new tab at top of page

Question

I've frozen my Shiny Dashboard's header at the top of the window per this thread, which is convenient, since I'm going to have a lot of long tabs on my dashboard. However, whenever I switch tabs, the new tab doesn't load with me at the top of the tab--I start however far down on the new tab I was on the old tab when I switched over. Is there a way to change this? Here's some play code:

library(shiny)          # shiny application
library(shinydashboard) # shiny dashboard toolkit
library(shinyjs)        # allows use of Javascript--used for sidebar closing ability

# ------------------------------------------------------------------------------
# BUILD UI
# ------------------------------------------------------------------------------

# Box height
boxHeight = "30em"

# Header content
header <- dashboardHeader(
  title = span("Jim's Dashboard", 
               style = "color: white; font-size: 28px"), 
  titleWidth = 260
)

# Sidebar content
sidebar <- dashboardSidebar(
  width = 260,
  collapsed = TRUE,
  sidebarMenu(
    id = "mysidebar",
    menuItem("Dashboard 1", tabName = "tab1", icon = icon("tachometer-alt")),
    menuItem("Dashboard 2", tabName = "tab2", icon = icon("chart-pie"))
  )
)

# Body content
body <- dashboardBody(

  # Keep header/sidebar frozen at top, per https://stackguides.com/questions/45706670/shiny-dashboadpage-lock-dashboardheader-on-top
  tags$script(HTML("$('body').addClass('fixed');")), 
  
  # This line allows us to use Javascript; so far, it's only used to make the
  # sidebar go away once we've changed pages, per https://stackguides.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
  useShinyjs(),
  
  tabItems(
    # 1ST TAB
    tabItem(tabName = "tab1",
      fluidRow(
        column(width=10, offset=1,
          fluidRow(
            box(height = boxHeight),
            box(height = boxHeight),
            box(height = boxHeight),
            box(height = boxHeight),
            box(height = boxHeight,width = 12),
            box(height = boxHeight),
            box(height = boxHeight),
            box(height = boxHeight,width = 12)
    )))),
    # 2ND TAB
    tabItem(tabName = "tab2",
      fluidRow(
        column(width=10, offset=1,
        fluidRow(
          box(height = boxHeight,width = 12),
          box(height = boxHeight),
          box(height = boxHeight),
          box(height = boxHeight),
          box(height = boxHeight),
          box(height = boxHeight,width = 12),
          box(height = boxHeight,width = 12),
          box(height = boxHeight,width = 12)
    ))))
  )
)

server <- function(input,output,session){
  
  # Adding these lines makes the sidebar go away once we've loaded a new page,
  # per https://stackguides.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
  observeEvent(input$mysidebar,
               {
                 # for desktop browsers
                 addClass(selector = "body", class = "sidebar-collapse")
                 # for mobile browsers
                 removeClass(selector = "body", class = "sidebar-open")
               }
  )
}

#Dashboard page
dashboard <- dashboardPage(header, sidebar, body, tags$head(tags$style(HTML('* {font-family: "Lucida Sans"}!important;'))))

shinyApp(dashboard, server)

lz100 lz100 · Accepted Answer · 2021-11-02T21:00:30

add this anywhere in the body

tags$script('$(".sidebar-menu a[data-toggle=\'tab\']").click(function(){window.scrollTo({top: 0});})')

like this

library(shiny)          # shiny application
library(shinydashboard) # shiny dashboard toolkit
library(shinyjs)        # allows use of Javascript--used for sidebar closing ability

# ------------------------------------------------------------------------------
# BUILD UI
# ------------------------------------------------------------------------------

# Box height
boxHeight = "30em"

# Header content
header <- dashboardHeader(
  title = span("Jim's Dashboard", 
               style = "color: white; font-size: 28px"), 
  titleWidth = 260
)

# Sidebar content
sidebar <- dashboardSidebar(
  width = 260,
  collapsed = TRUE,
  sidebarMenu(
    id = "mysidebar",
    menuItem("Dashboard 1", tabName = "tab1", icon = icon("tachometer-alt")),
    menuItem("Dashboard 2", tabName = "tab2", icon = icon("chart-pie"))
  )
)

# Body content
body <- dashboardBody(
  tags$script('$(".sidebar-menu a[data-toggle=\'tab\']").click(function(){window.scrollTo({top: 0});})'),
  # Keep header/sidebar frozen at top, per https://stackguides.com/questions/45706670/shiny-dashboadpage-lock-dashboardheader-on-top
  tags$script(HTML("$('body').addClass('fixed');")), 
  
  # This line allows us to use Javascript; so far, it's only used to make the
  # sidebar go away once we've changed pages, per https://stackguides.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
  useShinyjs(),
  
  tabItems(
    # 1ST TAB
    tabItem(tabName = "tab1",
            fluidRow(
              column(width=10, offset=1,
                     fluidRow(
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight,width = 12),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight,width = 12)
                     )))),
    # 2ND TAB
    tabItem(tabName = "tab2",
            fluidRow(
              column(width=10, offset=1,
                     fluidRow(
                       box(height = boxHeight,width = 12),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight),
                       box(height = boxHeight,width = 12),
                       box(height = boxHeight,width = 12),
                       box(height = boxHeight,width = 12)
                     ))))
  )
)

server <- function(input,output,session){
  
  # Adding these lines makes the sidebar go away once we've loaded a new page,
  # per https://stackguides.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
  observeEvent(input$mysidebar,
               {
                 # for desktop browsers
                 addClass(selector = "body", class = "sidebar-collapse")
                 # for mobile browsers
                 removeClass(selector = "body", class = "sidebar-open")
               }
  )
}

#Dashboard page
dashboard <- dashboardPage(header, sidebar, body, tags$head(tags$style(HTML('* {font-family: "Lucida Sans"}!important;'))))

shinyApp(dashboard, server)

Shiny Dashboard load new tab at top of page

1 Answers